Dynamic resizing based on screen size in Flutter

For dynamic resizing based on the screen sizes in flutter here are a few approaches that might help simplify and improve your solution:

1. Use MediaQuery for Dynamic Screen Size Calculation
2. Responsive Layouts Using LayoutBuilder
3. Flexible Widgets and FittedBox for Scaling
4. Using flutter_screenutil for Proportional Scaling
5. Using FractionallySizedBox for Flexible Resizing

MediaQuery for Dynamic Screen Size Calculation

Use MediaQuery to obtain the current screen’s width, height, and device pixel ratio. This way, you can ensure that the layout scales dynamically based on the actual device screen size.

For Example:

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

double factor = screenWidth / 375; // 375 is a reference width (e.g., iPhone 6)

double fontSize = factor * 16; // Adjust font size dynamically
double iconSize = factor * 24; // Adjust icon size dynamically

With this approach you can easily scale your UI for different screen sizes.

for further details: MediaQuery

Responsive Layouts Using LayoutBuilder

Layout builder provides you the dimensions of the parent widget, then using those dimensions to scale the child widgets.

Forexample:

LayoutBuilder(
  builder: (context, constraints) {
    double screenWidth = constraints.maxWidth;
    double screenHeight = constraints.maxHeight;
    double factor = screenWidth / 375;

    return Column(
      children: [
        Container(
          width: screenWidth * 0.5,
          height: screenHeight * 0.2,
          color: Colors.blue,
          child: Text(
            'Responsive Container',
            style: TextStyle(fontSize: factor * 20),
          ),
        ),
        Icon(
          Icons.access_alarm,
          size: factor * 40,
        ),
      ],
    );
  },
);

now the child widgets will adjust automatically on different screen sizes.

for further details on LayoutBuilder.

Flexible Widgets and FittedBox for Scaling

Using Flexible and FittedBox will make sure the widgets resize proportionally without providing the size manually.
Flexible widget adjusts the widget elements based on the available space, while FittedBox make sure that the content fits with in the available bounds.

ForExample:

Flexible(
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
      'Responsive Text',
      style: TextStyle(
        fontSize: 18,
        color: Colors.black,
      ),
    ),
  ),
)

Now the FittedBox will automatically scales the content within the available space.

For further details on Flexible.
For further details on FittedBox.

flutter_screenutil for Proportional Scaling

flutter_screenutil provides an easy way to define the widget size ratios that scale proportionally to the screen’s dimensions.

for example:

Container(
  width: 200.w,  // Scales width proportionally
  height: 100.h,  // Scales height proportionally
  child: Text(
    'Responsive Text',
    style: TextStyle(fontSize: 20.sp),  // Scales font size proportionally
  ),
) 

for further details visit this page: flutter_screenutils

FractionallySizedBox for Flexible Resizing

FractionallySizedBox ensures that the element’s size is proportional to the parent widget size by defining the width and height proportional to the parent’s size.

For Example:

FractionallySizedBox(
  widthFactor: 0.8, // 80% of the parent width
  heightFactor: 0.3, // 30% of the parent height
  child: Container(
    color: Colors.green,
    child: Text('I resize with the parent'),
  ),
)

for further details: FractionallySizedBox