Определение размера контейнера до половины размера экрана во флаттере

Question

Я пытаюсь получить контейнер равным половине высоты экрана [после рассмотрения высоты AppBar] и половине ширины экрана.

Это то, что я придумал...

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Flexible(
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(),
          )
        ],
      ),
    );
  }
}

Есть ли способ лучше?

Answer 1

Вы можете вычесть AppBar высота для настройки Container размер.

@override
Widget build(BuildContext context) {
  var appBar = AppBar();
  return Scaffold(
    appBar: appBar,
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: (MediaQuery.of(context).size.height - appBar.preferredSize.height) / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );
}

ht tps://stackru.com/images/37361326eb9e2f6d96d691c6eff235556f135c3b.jpg

Answer 2

Если вы хотите, чтобы высота контейнера составляла половину доступного пространства, вы можете использовать виджет LayoutBuilder. С помощью виджета LayoutBuilder вы можете узнать в функции построителя, какой будет максимальная доступная ширина и высота. Пример использования в вашем случае будет выглядеть так:

Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topCenter,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              height: constraints.maxHeight / 2,
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            );
          },
        ),
      ),
    );

Answer 3

Лучший способ и самый простой способ решить эту и подобные проблемы - просто использовать FractionallySizedBoxвиджет; например

FractionallySizedBox(
    alignment: Alignment.topCenter,
    widthFactor: 0.5,
    child: Container(
    height: 100,
  ),
),

Этот виджет (FractionallySizedBox) позволяет вам наращивать child указав долю родительской ширины (или высоты), доступную для childвиджет. После этого, указав alignment, вы можете указать способ распределения остального пространства.

Для получения дополнительной помощи по этому виджету посетите официальную страницу справки этого виджета.

Answer 4

Вы на правильном пути в использовании MediaQuery, но ваш код может быть намного проще:

  Scaffold(
    appBar: AppBar(),
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );

Answer 5

Или просто просто...

      SizedBox(
          height: MediaQuery.of(context).size.height*0.5,
          child: ...,
        ),