Шаблон кода, когда вы хотите использовать LayoutBuilder Flutter внутри столбца

Question

У меня есть столбец с двумя элементами A и B. A имеет фиксированную высоту, а B должен заполнять остальную часть экрана. В BI хотят принимать решения о компоновке на основе высоты B черезLayoutBuilder().

Если я использую Column()-widget обычно BoxConstraint для B задается как инфинитив. Есть ли хороший образец для этой задачи, который дает конечную высоту для B?

Answer 1

Использовать Mediaquery

Size size = MediaQuery.of(context).size;

на контейнере Bheight: size.height - containerAFixedHeight

Answer 2

Оберните свойLayoutBuilder()в (или вFlexibleесли вы не хотите, чтобы он расширялся) виджет, а затем вы можете использовать ограничение maxHeight LayoutBuilder во время выполнения.

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        /// Widget "A":
        Container(height: 100, color: Colors.red),

        /// Widget "B":
        Expanded(
          child: LayoutBuilder(builder: (_, ct) {
            print(" Constraints(h,w): ${ct.maxHeight}, ${ct.maxWidth}");
            return Container(color: Colors.blue);
          }),
        )
      ],
    );
  }
}

Вот тест в браузере Chrome:

Какие печатаетConstraints(h,w): 460, 500к терминалу. БезExpandedон печатаетinfinityдля ограничения по высоте.