Flutter - LayoutBuilder Widget - GeeksforGeeks

24 Jan, 2021
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:
android
Flutter
Flutter-widgets
Picked
Technical Scripter 2020
Dart
Flutter
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
Flutter - Flexible Widget
ListView Class in Flutter
Flutter - Stack Widget
Android Studio Setup for Flutter Development
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Format Dates in Flutter