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

結論を先にまとめると…

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

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

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

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

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

本多

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

手順は目次の通りです

単純にappBarを指定しない場合、statusバーも消える
AppBarを消してもstatusバーを残す方法
1. Containerを返す自作クラス「EmptyAppBar」を作成する
2. ScaffoldのappBarにEmptyAppBar()を指定する
まとめ：【Flutter】AppBarを消しても上部のstatusバーは残す方法

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

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

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

  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: EmptyAppBar(),
      body: buildFloatingSearchBar(),
    );
  }

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(), /// これは今関係ないです。（お好きなものをどうぞ）
    );
  }

ビルドしてみよう！