How to make flutter app responsive according to different screen size?

In Flutter, to make applications responsive to different screen sizes, common strategies include:

1. Media Queries (MediaQuery)

Using MediaQuery.of(context) retrieves information such as the current device's screen size, orientation, and device pixel ratio. For example, you can decide to display a list or a grid view based on the screen width.

dart
var screenSize = MediaQuery.of(context).size;
if (screenSize.width > 600) {
  return GridView(...);
} else {
  return ListView(...);
}

2. Layout Builder (LayoutBuilder)

LayoutBuilder allows constructing different layouts based on the size of the parent widget. This is very useful because it enables layout decisions to be made at a more granular level.

dart
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return GridView(...);
    } else {
      return ListView(...);
    }
  },
);

3. Responsive Framework

You can use third-party libraries like flutter_screenutil to simplify implementing responsive design. These libraries allow developers to set element sizes that automatically scale based on the device's screen size.

dart
Row(
  children: <Widget>[
    Container(
      width: ScreenUtil().setWidth(400),
      height: ScreenUtil().setHeight(200),
      child: Text('Adapt to screen'),
    ),
  ],
);

4. Percentages and Ratios

Using widgets like Flexible and FractionallySizedBox, you can make widgets adjust their size based on the parent container's size. For example, you can use FractionallySizedBox to make a button always occupy a certain percentage of the screen width.

dart
FractionallySizedBox(
  widthFactor: 0.8, // Occupies 80% of the width
  child: RaisedButton(
    onPressed: () {},
    child: Text('Click me'),
  ),
);

5. Adaptive Layout Widgets

Flutter also provides adaptive layout widgets like Flexible and Expanded, which offer better layout experiences across different screen sizes.

dart
Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        child: Text('Fill remaining space'),
      ),
    ),
    Container(
      width: 100,
      color: Colors.blue,
      child: Text('Fixed width 100'),
    ),
  ],
);

By using these methods, Flutter applications can better adapt to different screen sizes, providing an improved user experience.