What is the purpose of the LayoutBuilder widget in Flutter?

Overview

LayoutBuilder

Basic Usage

dartCopy
LayoutBuilder(
  builder: (context, constraints) {
    print('Max width: ${constraints.maxWidth}');
    print('Max height: ${constraints.maxHeight}');

    return Container(
      width: constraints.maxWidth,
      child: Text('I know my container size!'),
    );
  },
)

Responsive Layout Example

dartCopy
LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      // Tablet / Desktop layout
      return Row(
        children: [
          Expanded(child: SidebarWidget()),
          Expanded(flex: 3, child: ContentWidget()),
        ],
      );
    } else {
      // Mobile layout
      return Column(
        children: [
          ContentWidget(),
        ],
      );
    }
  },
)

Responsive Grid

dartCopy
LayoutBuilder(
  builder: (context, constraints) {
    final columns = constraints.maxWidth > 600 ? 3 : 2;

    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columns,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) => ItemCard(item: items[index]),
    );
  },
)

LayoutBuilder vs MediaQuery

BoxConstraints Properties

dartCopy
LayoutBuilder(
  builder: (context, constraints) {
    constraints.maxWidth   // Maximum available width
    constraints.maxHeight  // Maximum available height
    constraints.minWidth   // Minimum width
    constraints.minHeight  // Minimum height
    constraints.biggest    // Size(maxWidth, maxHeight)
    constraints.smallest   // Size(minWidth, minHeight)
  },
)

Best Practice: Use

textCopy

LayoutBuilder

for building responsive widgets that need to adapt based on the space given by their parent — especially useful for reusable components that may be used in different size contexts.