The responsive design layout UI changes according to the screen size and the shape of the devices.The Responsive UI In Flutter simply means using a single code set that responds to various changes to the layout of the devices.Some apps will adjust the size of the page according to the screen when the user either resizes the window on the laptop or changes the orientation of the phone or tablet. In responsive design, there are majorly three things to consider- Size, Orientation, and Device type.
📚 Official document responsive UI : https://docs.flutter.dev/ui/layout/responsive/adaptive-responsive
Here’s a general overview and some resources on creating responsive designs in Flutter:
1. Media Query
Media Query can be used to get the real-time size (width/height) and orientation (portrait/landscape) of the window screen. It suggests the orientation and size of the app.
Official document : https://api.flutter.dev/flutter/widgets/MediaQuery-class.html2. Layout Builder
Layout Builder is just a simplified version of Media Query. The main difference between Media Query and Layout Builder is that Media Query is based on the full context of the screen rather than just the size of a particular widget; on the other hand, Layout Builder determines the maximum width and height of a specific widget only.
Official document : https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html3. Orientation Builder
The Orientation Builder widget is similar to the Layout Builder class. One can get the Orientation object using the builder property of OrientationBuilder class. For example, you can use the OrientationBuilder class to change the number of columns of GridView.
Official document : https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html4. Expanded and Flexible Widgets
Expanded and Flexible Widgets are two widgets that can be used inside Row, Column, or Flex to give their children the flexibility in order to expand to fill the available space. The only difference is that the Expanded widget requires the child to fill all the available space, whereas Flexible does not. Also, Expanded and Flexible widgets can be used to get a responsive Flutter UI that works with percentages instead of hardcoded values.
Official document : https://api.flutter.dev/flutter/widgets/Expanded-class.html5. Aspect Ratio Widget
The Aspect Ratio widget can be used to size the child to a specific aspect ratio. When developing an app, one can neglect its size but must consider the aspect ratio. The AspectRatio widget thus assists you at this point by sizing the child value to a specific aspect ratio and ensures responsive design in Flutter.
Official document : https://api.flutter.dev/flutter/widgets/AspectRatio-class.html6. Fractionally Sized Box Widgets
Fractionally Sized Widgets are useful when the designs are calling for dimensions that are relative. For example, when a button is occupying 80% of the app’s width whereas the margin takes only 10%, fractionally sized box Widgets can help with that. You can even wrap this Fractionally Sized Box in a flexible widget so that it can play well with a row or a column.
Official document : https://api.flutter.dev/flutter/widgets/SizedBox-class.html7. Custom MutiChild Layout Class
CustomMultiChildLayout is a widget that utilizes a delegate to specify the size and position of multiple children within it. This delegate is responsible for defining the layout constraints of each child and determining their positioning within the parent widget. While the delegate can define the size of the parent, it cannot be dependent on the size of its children. CustomMultiChildLayout is a suitable choice when there are intricate connections between the positioning and size of various widgets.
Official document : https://api.flutter.dev/flutter/widgets/CustomMultiChildLayout-class.html