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.

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) {
  SizeConfigInit(
          referenceHeight: 800,
          referenceWidth: 360);
      child: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

desktop size config

Mobile Image

mobile size_config

Tablet Image

tab image


Code for above image is available in Example tab

Libraries

size_config