size_config 2.0.3

Building responsive UI made easy with extension that size_config package provide.

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.

New Features added

• You can now use SizeConfigInit widget to initialize the package.
• New extensions added:
  • (value).s : Gives value based on smallest edge.
  • (value).verticalSpacer : Returns sized box of height as per given value
  • (value).horizontalSpacer : Returns sized box of width as per given value
  • (percentage value).verticalSpacerPercent : Returns sized box of height by calculating the given percentage of screen height.
  • (percentage value).horizontalSpacerPercent : Returns sized box of width by calculating the given percentage of screen width.

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

Mobile Image

Tablet Image

Code for above image is available in Example tab