結論を先にまとめると…
以下の手順で実現できます。
- 自作クラス『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(),
);
}

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(), /// これは今関係ないです。(お好きなものをどうぞ)
);
}
ビルドしてみよう!

どうでしょうか?画像のようになりましたか?
まとめ:【Flutter】AppBarを消しても上部のstatusバーは残す方法
まとめ
以下の手順で実現できます。
- 自作クラス『EmptyAppBar()』を作成する。
- appBarにEmptyAppBarを指定する。

本多
分かりにくい点がありましたら、遠慮なくお問い合わせください!
最後までご覧いただき、ありがとうございました。
コメント