【Flutter】AppBarがある時に、画面サイズを動的に取得する方法

まずは以下のソースコードを見て下さい。

 @override
  Widget build(BuildContext context) {
    final appBar = AppBar(
      title: Text(
        'Personal Expenses',
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            _startAddNewTransaction(context);
          },
        )
      ],
    );
    return Scaffold(
      appBar: appBar,
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              height: (MediaQuery.of(context).size.height -
                      appBar.preferredSize.height) *
                  0.4,
              child: Chart(_recentTransactions),
            ),
            Container(
                height: (MediaQuery.of(context).size.height -
                        appBar.preferredSize.height) *
                    0.6,
                child: TransactionList(_userTransaction, _deleteTransaction)),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _startAddNewTransaction(context);
        },
      ),
    );
  }

このソースコード内にある

height: (MediaQuery.of(context).size.height - appBar.preferredSize.height) * 0.4,

や

height: (MediaQuery.of(context).size.height - appBar.preferredSize.height) * 0.6,

が高さの制御をしております。

まず、以下のようにappBar変数にAppBarに設定する値を持たせています。

final appBar = AppBar(
      title: Text(
        'Personal Expenses',
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            _startAddNewTransaction(context);
          },
        )
      ],
    );

その後、MediaQuery.of(context).size.height で全体の画面サイズからappBar のサイズを引き、その値の40% もしくは60% を高さにする。 という意味です。

つまり、全体の高さを動的に取得したかったら以下の様に取得し、

MediaQuery.of(context).size.height

そこから、自身の欲しい割合の高さを計算させれば良いという事ですね。

今回は以上です。