Flutter LayoutBuilder Examples

Last updated on July 22, 2021 The Frog Loading... Post a comment

This article walks you through a couple of different examples of using the LayoutBuilder widget in Flutter applications.

A Prefatory Note

The LayoutBuilder widget in Flutter helps you build a widget tree that can depend on the parent widget’s size (a minimum and maximum width, and a minimum and maximum height).

Implementation:

LayoutBuilder(
          builder: (context, constraints) {
            return /* your widget tree here */
          },
        )

Example 1: Building a Simple Layout

In this example, the descendant widgets of the LayoutBuilder don’t have fixed widths and heights but depend on the size of the parent LayoutBuilder.

Screenshot:

The complete code:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: "Kindacode.com",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: LayoutBuilder(
          builder: (context, constraints) {
            return Column(children: [
              Container(
                  color: Colors.yellow,
                  width: constraints.maxWidth,
                  height: constraints.maxHeight * 0.5),
              Container(
                  color: Colors.green,
                  width: constraints.maxWidth,
                  height: constraints.maxHeight * 0.2),
              Container(
                  color: Colors.red,
                  width: constraints.maxWidth * 0.4,
                  height: constraints.maxHeight * 0.3),
            ]);
          },
        ));
  }
}

Example 2: Build a Responsive UI for multiple screen sizes

Let’s say we want to make a cross-platform app that can run on the web, desktops, tablets, and mobile phones. When the screen size is large, we will display the sidebar on the right side. When the screen is small, we will not display the sidebar.

App Preview

The full code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: "Kindacode.com",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(builder: (context, constraints) {
      // Large screens (tablet on landscape mode, desktop, TV)
      if (constraints.maxWidth > 600) {
        return Row(
          children: [
            Column(
              children: [
                Container(
                  height: 100,
                  width: constraints.maxWidth * 0.75,
                  color: Colors.blueAccent,
                  child: Center(
                    child: Text('Header'),
                  ),
                ),
                Container(
                  height: 300,
                  width: constraints.maxWidth * 0.75,
                  color: Colors.amber,
                  child: Center(
                    child: Text('Main Content'),
                  ),
                ),
                Container(
                  height: constraints.maxHeight - 400,
                  width: constraints.maxWidth * 0.75,
                  color: Colors.lightGreen,
                  child: Center(
                    child: Text('Footer'),
                  ),
                ),
              ],
            ),
            Container(
              width: constraints.maxWidth * 0.25,
              height: constraints.maxHeight,
              color: Colors.pink,
              child: Center(
                child: Text('Right Sidebar'),
              ),
            ),
          ],
        );
      }

      // Samll screens
      return Column(
        children: [
          Container(
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text('Header'),
            ),
          ),
          Container(
            height: 300,
            color: Colors.amber,
            child: Center(
              child: Text('Main Content'),
            ),
          ),
          Container(
            height: constraints.maxHeight - 400,
            color: Colors.lightGreen,
            child: Center(
              child: Text('Footer'),
            ),
          )
        ],
      );
    }));
  }
}

Note: You can clean the code on your own by reducing the duplicates (the header, main content, and footer sections can be reusable).

Conclusion

You’ve learned the fundamentals of the LayoutBuilder widget and walked through a few examples of using it. If you’d like to explore more new and interesting things in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page, or Dart topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles