Using the LayoutBuilder class

Builds a widget tree that can depend on the parent widget's size.

From its builder property, you get a BoxConstraints object. Examine the constraint’s properties to decide what to display. For example, if your maxWidth is greater than your width breakpoint, return a spanword Scaffold object with a row that has a list on the left. If it’s narrower, return a Scaffold object with a drawer containing that list. You can also adjust your display based on the device’s height, the aspect ratio, or some other property. When the constraints change (for example, the user rotates the phone, or puts your app into a tile UI in Nougat), the build function runs.

The builder function is called in the following situations:

  • The first time the widget is laid out.

  • When the parent widget passes different layout constraints.

  • When the parent widget updates this widget.

  • When the dependencies that the builder function subscribes to change.


The builder function is not called during layout if the parent passes the same constraints repeatedly.





Example :

class MyStatelessWidget extends StatelessWidget {

  const MyStatelessWidget({Keykey}) : super(keykey);

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBarAppBar(titleconst Text('LayoutBuilder Example')),

      bodyLayoutBuilder(

        builder: (BuildContext contextBoxConstraints constraints) {

          if (constraints.maxWidth > 600) {

            return _buildWideContainers();

          } else {

            return _buildNormalContainer();

          }

        },

      ),

    );

  }

 

  Widget _buildNormalContainer() {

    return Center(

      childContainer(

        height100.0,

        width100.0,

        colorColors.red,

      ),

    );

  }

 

  Widget _buildWideContainers() {

    return Center(

      childRow(

        mainAxisAlignmentMainAxisAlignment.spaceEvenly,

        children: <Widget>[

          Container(

            height100.0,

            width100.0,

            colorColors.red,

          ),

          Container(

            height100.0,

            width100.0,

            colorColors.yellow,

          ),

        ],

      ),

    );

  }

}

 



On Portrait Mode : width = 400 < 600

LayoutBuilder  flutter

On Landscape Mode : width = 683 > 600

LayoutBuilder  flutter

Exercise :

Try to do this using LayoutBuilder.

LayoutBuilder  flutter LayoutBuilder  flutter



Solution :

        LayoutBuilder(

          builder: (BuildContext ctxBoxConstraints constraints) {

            // if the screen width >= 450

            if (constraints.maxWidth >= 450) {

              return Row(

                mainAxisAlignmentMainAxisAlignment.spaceAround,

                children: <Widget>[

                  Container(

                    paddingconst EdgeInsets.all(8),

                    alignmentAlignment.center,

                    heightconstraints.maxHeight * 0.35,

                    widthconstraints.maxWidth * 0.25,

                    marginconst EdgeInsets.all(8),

                    colorColors.deepOrange,

                    childconst Text(

                      'Left Screen',

                      styleTextStyle(

                        fontSize16,

                        fontWeightFontWeight.bold,

                        colorColors.white,

                      ),

                    ),

                  ),

                  Container(

                    paddingconst EdgeInsets.all(8),

                    alignmentAlignment.center,

                    heightconstraints.maxHeight * 0.35,

                    widthconstraints.maxWidth * 0.25,

                    marginconst EdgeInsets.all(8),

                    colorColors.pink,

                    childconst Text(

                      'Right Screen',

                      styleTextStyle(

                        fontSize16,

                        fontWeightFontWeight.bold,

                        colorColors.white,

                      ),

                    ),

                  ),

                ],

              );

 

              // If screen size is < 450

            } else {

              return Container(

                alignmentAlignment.center,

                marginconst EdgeInsets.all(20),

                heightconstraints.maxHeight * 0.25,

                colorColors.blueAccent,

                childconst Text(

                  'Normal Screen',

                  styleTextStyle(

                    fontSize20,

                    fontWeightFontWeight.bold,

                    colorColors.white,

                  ),

                ),

              );

            }

          },

        )