Responsive application refers to the application of the UI and subject to change with the change of the screen or window, when the same application needs to run in different types of equipment (such as watches, mobile phones, tablet, notebook or desktop computer), when the user to adjust the window size on a laptop or desktop, or change the direction of the mobile phone or tablet, Your application will need to reconfigure the interface accordingly to respond.

Method:

1. Use the LayoutBuilder class

You can get a BoxConstraints object through its Builder property, and determine what to display by examining the constraints property.

  • If your maxWidth is greater than your width breakpoint, it returns a Scaffold object with a left list.
  • If it is narrower, the Scaffold object is returned with a drawer.
  • You can also adjust the UI display based on the height, aspect ratio, or other properties of the device. The Build function is executed when constraints changes, such as when the user rotates the phone or applies a split screen.

2. Use mediaQuery.of () in the build function

 MediaQuery.of(context).size.width/MediaQuery.of(context).size.height
Copy the code

3. Expanded and Flexible

Widgets that are particularly useful in a Row or Column are Expanded and Flexible. When Expanded is used in a Row, Column, or Flex, Expanded can have its child widgets automatically fill the available space, as opposed to Flexible’s child widgets that do not fill the entire available space.

4.FractionallySizedBox

The FractionallySizedBox widget resizes its child elements to a fraction of the available space. Use this component when you want your widget to take up a percentage of the current screen width and height. Wrap expanded or Flexible around the FractionallySizedBox when you want to use percentage layouts in Row and Column components

5, AspectRatio

You can use the AspectRatio widget to resize child elements to a specific AspectRatio. First, it tries the maximum width allowed by the layout constraint and determines the height by applying the given aspect ratio to the width.