Responsive and Adaptive UI in Flutter/

...

/

The LayoutBuilder Widget

The LayoutBuilder Widget

Render a subtree of Flutter widgets with a layout that depends on the parent widget with the LayoutBuilder widget.

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 widget in lines 8 and 9. The ...