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:

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}"),


        ],
      );
    },
  );
}

!