The New Package for Your Responsive Flutter App Development

In this article will examine how to make your more responsive using the size_setter package

Table of Contents

OverView

Why Size Setter

Benefits

usage

Overview

“Unlocking Design Adaptability: Introducing the size_setter package for Flutter, a powerful package that seamlessly transforms static pixels into dynamic and responsive percentages. This innovative package revolutionizes the world of cross-device aesthetics, offering a user-friendly solution that requires minimal effort from developers.

Why size_setter?

In mobile application development, it is quite difficult to convert your pixels into percentages dependent on source device size utilizing tools such as Figma to make your apps responsive. If you have sizes in pixels, this package will let us transform them automatically into adaptable responsive sizes dependent on the size of the source device.

for example, if the designer created this mobile SizedBox width for the iPhone 13 screen size is 200; for other mobile devices, you must provide measurements in % to make it responsive app development.

Key benefits

It converts pixel sizes to percentages, utilizing the source device size as a reference

The result is layouts that seamlessly adapt to various devices.

Based on the device, convert your numerical numbers to percentages.

simplified solution for gap between the widgets

How to Use

There are two ways to initialize an adaptive size_setter package,

Option 1:

wrap your Material App with an adaptive size_setter and mention your source device size, which means the designer has developed designs for that device.

SizeSetter(
    sourcewidth:365,
    sourceheight:677,
      child:MaterialApp(),   
 )

option 2:

Convert Your MaterialApp to Stateful Widget, add the following code in the didChangeDependencies method

 @override
  void didChangeDependencies() {
    SizeSetterUtils.setSourceDeviceSize(
        context: context,
     sourcewidth:365,
     sourceheight:677,);

    super.didChangeDependencies();
  }

Here If you don't want to mention your size, this package's default source device is iPhone 14 pro max, This device size is 430x932. If you are not going to convert pixels into percentages you may ignore mentioning device size.

• *`.ph` — It returns the percentage value of the screen Height
• * `.pw` —It returns the percentage value of the screen Width

SizedBox(
width:MediaQuery.of(context).size.screenWidth*0.10,//  it returns   20% of the screen width
heihgt:MediaQuery.of(context).size.screenHeight*0.10 //  it returns   10% of the screen Height
)
// or

SizedBox(
width:20.pw,// it returns   20% of the screen width
heihgt:10.ph //  it returns   10% of the screen Height
)

• `.w` — Returns a calculated width based on the device
• `.h` — Returns a calculated height based on the device

It’s actually calculating the percentage value based on the source device and appropriate size, it makes your app so responsive.

///it's make your app responsive

SizedBox(
width:200.w,//  it returns  responsive screen width for all devices
heihgt:100.h // it returns  responsive screen height for all devices
)

Sometimes, you need Square sized for all devices, Since mobile screen sizes change non-linearly, the square may become a rectangle even if you are converted in percentage.

// it returns responsive square Widget
SizedBox(
width:100.w,
heihgt:100.w 
)

• `.px` — Returns a calculated pixel based on the device

Text("adpativeSizers", 
   style:TextStyle(fontSize:14.px,
         ),
    ) // it will return font size in pixels based on device

* `.sp` — Returns a calculated sp based on the device

Text("adpativeSizers", 
   style:TextStyle(fontSize:14.sp,
         ),
    ) // it will return dynamic font size in sp  based on device

• `.widthBox` — it returns a gap with a dynamic size widget, mainly used to make it responsive.

SizedBox(
width:200.w
)
// or
200.widthBox

• `.pWidthBox` — it returns a gap with a percentage of the screen width size

SizedBox(
width:MediaQuery.of(context).size.screenWidth*0.7
)
// or

70.pWidthBox

• `.heightBox` — it returns a gap with a dynamic size height, mainly used to make it responsive.

SizedBox(
height:200.h
)
// or
200.heightBox

• `.pHeightBox` — it returns a gap with a percentage of the screen height size

SizedBox(
height:MediaQuery.of(context).size.screenHeight*0.7
)
// or
70.pHeightBox

Final Thoughts!

Thank you for considering size_setter as a valuable addition to your Flutter development toolkit. We’re excited to see how it will empower your projects and contribute to your success.