Как разместить столбец внутри стека на основе дробной высоты экрана в флаттере?

Question

Я хочу расположить Column внутри Stack, чтобы он занимал 60% экрана и располагался внизу экрана.

////////
|
|
|40%
////////
|column
|
|
|
|60%
////////

В настоящее время я пытаюсь сделать это с Positioned и с MediaQuery Но это не работает.

      new Positioned(
        top: MediaQuery.of(context).size.height * .4,
        height: MediaQuery.of(context).size.height * .6,

        child: new Column(

Я знаю, что есть некоторые дробные виджеты, которые должны помочь.

Answer 1

Это можно сделать с помощью виджета «Столбец» (который является подклассом виджета «Flex») и расширенных дочерних элементов с помощью свойства flex.

Stack(
  fit: StackFit.expand,
  children: [
    Column(
      children: <Widget>[
        Expanded(
            flex: 4,
            child: Container() 
            ),
        Expanded(
          flex: 6,
          child: Column(
            children: <Widget>[],
          ),
        )
      ],
    )
  ],
)