Learn Layout Builder on Flutter and Build Responsive UI

Flutter Layout Builder is a Method that Builds a widget tree based on it's  parent widget's max size. By using this , you can build responsive UI for your Flutter App. In this guide you will learn how to use Layout builder on Flutter and build a responsive UI.

The main difference between MediaQuery and LayoutBuilder in Flutter is MediaQuery uses the complete context of the screen but Layout Builder uses it's parent Widget Size. For making a responsive UI , we need both of them. But in this tutorial  we are going to implement LayoutBuilder.

As I told you, LayoutBuilder is a method of Flutter. So it has a return type. Here the Return type is a Widget or Widget Tree. Look at the example below.

In this example we want to make a cross-platform flutter 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 left side inside a row. When the screen is small, we will display the sidebar on top inside a column. And also we will change a container color on tablet when it's parent widget size is less than 800, the container color will be black.

Full Code Here:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Orkitt Layout Builder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ResponsiveLayout(),
    );
  }
}

class ResponsiveLayout extends StatefulWidget {
  const ResponsiveLayout({super.key});

  @override
  State<ResponsiveLayout> createState() => _ResponsiveLayoutState();
}

class _ResponsiveLayoutState extends State<ResponsiveLayout> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Layout Builder'),
        centerTitle: true,
      ),
      body: LayoutBuilder(builder: (context, size) {
        if (size.maxWidth < 600) {
          //Display as a Column on Mobile
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 320,
                color: const Color.fromARGB(255, 60, 79, 95),
                child: const Center(
                    child: Text(
                  'SideBar',
                  style: TextStyle(color: Colors.white, fontSize: 34),
                )),
              ),
              Expanded(
                  child: Container(
                color: const Color.fromARGB(255, 58, 64, 75),
                child: const Center(
                    child: Text(
                  'Main Content',
                  style: TextStyle(color: Colors.white, fontSize: 34),
                )),
              ))
            ],
          );
        } else {
          //Display as a Row on Desktop
          return Row(
            children: [
              Container(
                height: double.infinity,
                width: 350,
                color: const Color.fromARGB(255, 60, 79, 95),
                child: const Center(
                    child: Text(
                  'SideBar',
                  style: TextStyle(color: Colors.white, fontSize: 34),
                )),
              ),
              Expanded(
                child: LayoutBuilder(builder: (context, size) {
                  final isSmall = size.maxWidth < 800;
                  //When small enable Black Color else Blue Color
                  return Container(
                    color: isSmall ? Colors.black : Colors.blue,
                    child: const Center(
                        child: Text(
                      'Main Content',
                      style: TextStyle(color: Colors.white, fontSize: 34),
                    )),
                  );
                }),
              )
            ],
          );
        }
      }),
    );
  }
}