[Flutter]画面上部のステータスバーとツールバー(AppBar)の高さを取得

2020年12月9日

Flutter で作成したアプリ上部のステータスバーと、Scaffold に AppBar を設定した場合のツールバーの高さを取得する方法です。

アプリのメイン領域最上部の位置を知りたいという時に利用できると思います。

ステータスバーの高さ

時刻やバッテリー容量などが表示されるステータスバーの高さは以下のように取得できます。

MediaQuery.of(context).padding.top

取得には BuildContext が必要です。StatefulWidget内やメソッド build における context を利用します。

ちなみに padding を出力してみると、以下の結果が返されました。

print(MediaQuery.of(context).padding.toString());
// 出力結果 => EdgeInsets(0.0, 25.0, 0.0, 0.0)

padding.top に値が設定されていることが確認できます。

ツールバー(AppBar)の高さ

ツールバーの高さの定数(kToolbarHeight)は constants.dart に定義されています。constants.dart は material.dart に含まれます。

ツールバーの高さを変更していない限り、この定数によって高さを取得できます。定義されている値は 56.0 です。

constants.dart

/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;

以下のようにステータスバーの高さと合わせて、上部に表示されるバー全体の高さを取得できます。

import 'package:flutter/material.dart';

...

double getBarHeight(BuildContext context) {
  return MediaQuery.of(context).padding.top + kToolbarHeight;
}

以上、ステータスバーとツールバーの高さを取得する方法でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です