【Flutter】AppBarを消しても上部のstatusバーは残す方法

【Flutter】AppBarを消しても上部のstatusバーは残す方法 技術メモ
結論を先にまとめると…

以下の手順で実現できます。

  • 自作クラス『EmptyAppBar()』を作成する。
  • appBarにEmptyAppBarを指定する。

Flutterでモバイルアプリを作る際、画面上部のAppBarを単純に削除すると、statusバー(Wi-Fiマークや時間が出ている部分)も消えてしまいます。

そこで、本記事では、AppBarだけを消して、statusバーだけ表示する方法を紹介します。

本記事では、右の状態を目指します!
本多
本多

思ったより簡単にできるのでご安心を!

手順は目次の通りです

単純にappBarを指定しない場合、statusバーも消える

まずは、問題の確認です。

以下のコードのように、ScaffoldのappBarを指定しない場合、画像の通り、statusバーも消えてしまいます。

  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: EmptyAppBar(),
      body: buildFloatingSearchBar(),
    );
  }
statusバーも消える

AppBarを消してもstatusバーを残す方法

Containerを返す自作クラス「EmptyAppBar」を作成する

まず、以下のように、Container()を返すクラスを作成します。(コピペでOK)

class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }

  @override
  Size get preferredSize => Size(0.0, 0.0);
}

ScaffoldのappBarにEmptyAppBar()を指定する

次に、ScaffoldのappBarに自作したクラス「EmptyAppBar()」を指定してあげます。

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: EmptyAppBar(),
      body: buildFloatingSearchBar(), /// これは今関係ないです。(お好きなものをどうぞ)
    );
  }

ビルドしてみよう!

statusバーは残る

どうでしょうか?画像のようになりましたか?

まとめ:【Flutter】AppBarを消しても上部のstatusバーは残す方法

まとめ

以下の手順で実現できます。

  • 自作クラス『EmptyAppBar()』を作成する。
  • appBarにEmptyAppBarを指定する。

本多
本多

分かりにくい点がありましたら、遠慮なくお問い合わせください!

最後までご覧いただき、ありがとうございました。

コメント

タイトルとURLをコピーしました