Flutter – LayoutBuilder Widget

In Flutter, LayoutBuilder Widget is similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget’s constraints. This is useful when the parent constrains the child’s size and doesn’t depend on the child’s intrinsic size. The LayoutBuilder’s final size will match its child’s size.

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.

Syntax:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return Widget();
  }
)

Click to learn about BoxConstraints.

Example 1: Using the parent’s constraints to calculate the child’s constraints. Most common use case of LayoutBuilder Widget.

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',

      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Container(
          color: Colors.red,

          /// Giving dimensions to parent Container
          /// using MediaQuery
          /// [container's height] = [(phone's height) / 2]
          /// [container's width] = [phone's width]
          height: MediaQuery.of(context).size.height * 0.5,
          width: MediaQuery.of(context).size.width,

          /// Aligning contents of this Container
          /// to center
          alignment: Alignment.center,

          child: LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {
              return Container(
                color: Colors.green,

                /// Aligning contents of this Container
                /// to center
                alignment: Alignment.center,

                /// Using parent's constraints
                /// to calculate child's height and width
                height: constraints.maxHeight * 0.5,
                width: constraints.maxWidth * 0.5,
                child: Text(
                  'LayoutBuilder Widget',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Output:

Example 2: We can also use LayoutBuilder Widget to display different UI’s for different screen sizes.

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',

      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Container(

          /// Giving dimensions to parent Container
          /// using MediaQuery
          /// [container's height] = [(phone's height) / 2]
          /// [container's width] = [phone's width]
          height: MediaQuery.of(context).size.height * 0.5,
          width: MediaQuery.of(context).size.width,

          /// Aligning contents of this Container
          /// to center
          alignment: Alignment.center,

          child: LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {

              // if the screen width >= 480 i.e Wide Screen
              if (constraints.maxWidth >= 480) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      alignment: Alignment.center,
                      height: constraints.maxHeight * 0.5,
                      color: Colors.red,
                      child: Text(
                        'Left Part of Wide Screen',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      alignment: Alignment.center,
                      height: constraints.maxHeight * 0.5,
                      color: Colors.green,
                      child: Text(
                        'Right Part of Wide Screen',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                );

              // If screen size is < 480
              } else {
                return Container(
                  alignment: Alignment.center,
                  height: constraints.maxHeight * 0.5,
                  color: Colors.green,
                  child: Text(
                    'Normal Screen',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

Output: