Как получить контейнеры для заполнения доступного вертикального пространства подряд?

Question

Кто-нибудь может мне помочь?

Я изо всех сил пытаюсь выяснить, как заставить цветные контейнеры расширяться, чтобы соответствовать высоте самого высокого в их ряду.

В настоящее время они не имеют фиксированной высоты / ширины и обернуты в расширенные виджеты, чтобы получить их динамический размер c.

Я бы хотел сохранить их адаптивные размеры, если это возможно. У меня уже есть способ переключиться на столбец вместо строки, когда экран становится достаточно маленьким. Однажды в столбце я могу использовать width: double.infinity, потому что нет горизонтальной прокрутки ..

Это пример используемого кода (извините, есть так много!):

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverNavBar(),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                      children: _homePageContent(),
                     );
                  Footer()
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

_homePageContent() {
  return <Widget>[
    _HomePageInfoBox(
      backgroundColor: accentColor,
      title: 'THIS IS A TITLE',
      body:
          'Lorem ipsum...',
    ),
    _HomePageInfoBox(
      backgroundColor: primaryColorDark,
      title: 'THIS IS A TITLE',
      body:
          'Lorem ipsum....',
    ),
    _HomePageInfoBox(
      backgroundColor: primaryColor,
      title: 'THIS IS A TITLE',
      body:
          'Lorem ipsum...',
    ),
  ];
}

class _HomePageInfoBox extends StatelessWidget {
  const _HomePageInfoBox({
    Key key,
    @required this.title,
    @required this.body,
    @required this.backgroundColor,
  }) : super(key: key);

  final String title;
  final String body;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      Container(
      color: backgroundColor,
      child: Padding(
        padding: const EdgeInsets.all(50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                  color: primaryTextColor,
                  fontSize: 25,
                  fontFamily: 'CoffeeAndTea'),
            ),
            SizedBox(height: 10),
            Text(
              body,
              style: TextStyle(
                  color: primaryTextColor,
                  fontSize: 24,
                  height: 1.4,
                  fontFamily: 'ElegantSans'),
            ),
            SizedBox(height: 20),
            Text(
              "Let's Go!",
              style: TextStyle(
                  color: Colors.white, fontFamily: 'CreamCake', fontSize: 30),
              textAlign: TextAlign.center,
            ),
          ],
        ),
       ),
     ),
    );
  }
}

Answer 1

Чтобы отрегулировать высоту элементов строки в соответствии с самой большой строкой обтекания с помощью виджета IntrinsicHeight:

  IntrinsicHeight(
    child:Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: _homePageContent(),
    ),
  ),

Здесь - это демонстрационная версия dartpad.

Answer 2

Оберните свое тело Text виджет с Expanded. Поскольку ваш родитель Widget равен Column, Expanded предоставит этому виджету все доступное вертикальное пространство.

Expanded(
  child: Text(
     body,
     style: TextStyle(
       color: primaryTextColor,
       fontSize: 24,
       height: 1.4,
       fontFamily: 'ElegantSans'),
 ),
),

Или вы можете сделать это с виджетом "Let's Go!" Text, чтобы избежать этого вплоть до нижней части экрана.

Обновлено:

Обратите внимание, что вы можете использовать IntrinsicHeight в качестве другого упомянутого ответа, но я всегда стараюсь избегать его использования, потому что этот класс относительно дорог. Вот почему с do c:

Этот класс является относительно дорогим, поскольку он добавляет умозрительный проход макета перед финальной фазой макета. Старайтесь не использовать его там, где это возможно. В худшем случае этот виджет может привести к макету O (N²) в глубине дерева.