Рубрики
Flutter

LayoutBuilder пример использования

LayoutBuilder — это виджет Flutter, который позволяет получать информацию о размере и расположении своего родительского виджета и на основе этой информации строить свой собственный виджет.

Вот пример использования LayoutBuilder:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LayoutBuilder Example'),
      ),
      body: Center(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              width: constraints.maxWidth,
              height: constraints.maxHeight,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Width: ${constraints.maxWidth}, Height: ${constraints.maxHeight}',
                  style: const TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

В этом примере мы создаем виджет MyWidget, который содержит LayoutBuilder в качестве дочернего виджета. В методе builder мы используем параметры BuildContext и BoxConstraints, которые предоставляются LayoutBuilder, чтобы создать Container, который занимает максимально возможное пространство в своем родительском виджете. Затем мы отображаем текстовое сообщение, которое отображает ширину и высоту Container.

Когда LayoutBuilder строит свой виджет, он предоставляет информацию о размере и расположении своего родительского виджета в объекте BoxConstraints. Затем мы используем эту информацию, чтобы установить размер Container. В нашем случае мы устанавливаем ширину и высоту Container равными максимально возможным значениям, которые мы получаем из BoxConstraints.

Таким образом, LayoutBuilder позволяет нам создавать адаптивный макет, который может изменять свой вид, в зависимости от размеров и расположения своего родительского виджета.