まずは以下のソースコードを見て下さい。
@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
そこから、自身の欲しい割合の高さを計算させれば良いという事ですね。
今回は以上です。