Search⌘ K
AI Features
Home
Courses
Responsive and Adaptive UI in Flutter

The LayoutBuilder Widget

Explore how to use Flutter's LayoutBuilder widget to create responsive UI elements that dynamically adapt to available space. Understand how to measure parent widget sizes and conditionally display widgets, enabling you to build more flexible and user-friendly applications.

We'll cover the following...

What if we want to change the layout of a Flutter widget depending on the size of its parent? We should use LayoutBuilder. Let’s look at an example:

import 'package:flutter/material.dart';

class LayoutBuilderInfo extends StatelessWidget {
  const LayoutBuilderInfo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final maxWidth = constraints.maxWidth;
        return Center(
          child: Text(
            'The max width is $maxWidth pixels',
            style: const TextStyle(fontSize: 24),
          ),
        );
      },
    );
  }
}
Use LayoutBuilder to get the maximum width allowed by the parent widget

The LayoutBuilderInfo widget in layout_builder_info.dart contains a LayoutBuilder ...