size_config 1.0.1

size_config: ^1.0.1 copied to clipboard

Overview #

Responsive UI is a must in today's world. We have devices of several sizes, like smart phones and tablets which differ in sizes and there we require a responsive UI which changes it's size based on size of device.
Also using flutter we can build web and desktop applications too along with mobile applications which also requires the UI to be responsive based on different screen sizes.

So we at Techy Panther tried to make responsive UI more easy to use for developers using this SizeConfig package.
There are two types of methods are available: - First, where we use percentage as values passed to height and width. - Second, where we use original values that are changed according to screen size.

Features #

• Get relative height and width for widgets with two different methods:
  • By using original values as mentioned in design.
  • By using percentage values of height and width.
• Get relative font size with respect to screen size.
• Spacer with relative height and width with original values as well as percentage values.

Getting started #

There are several extensions available for values as mentioned below:

• (width).w : For original width of widgets that will be changed by the extension based on device and UI design screen ratio.
• (height).h : For original height of widgets that will be changed by the extension based on device and UI design screen ratio.
• (<fontSize).sp : For original font size of text that will be changed by the extension based on device and UI design screen ratio.
• (widthPercentage).wp : For percentage value of width of widget with respect to screen size.
• (heightPercentage).hp: For percentage value of width of widget with respect to screen size.

Usage #

Widget buildResponsiveWidget(BuildContext context) {
  LayoutBuilder(
    builder: (context, constraints) {
      // initializing SizeConfig
      // reference height and width of UI design from Adobe XD,Figma or any other tool
      SizeConfig().init(context: context,
          safeAreaBox: constraints,
          referenceHeight: 800,
          referenceWidth: 360);
      SizeConfig().init(context, constraints);
      return Column(
        children: [
          Text("Font Size SizeConfigValue: ${20.sp}",style: TextStyle(fontSize:20.sp),),
          SizeConfigPercentage.verticalSpacer(10),
          Text("Width SizeConfigValue: ${20.w}"),
          Text("Width SizeConfigPercentage: ${20.wp}"),
          SizeConfigValue.verticalSpacer(10),
          Text("Height SizeConfigValue: ${20.h}"),
          Text("Height SizeConfigPercentage: ${20.hp}"),


        ],
      );
    },
  );
}

Desktop Image #

Mobile Image #

Tablet Image #