Flutterでステータスバーを表示したままAppBarを非表示にする

概要

Flutterでステータスバーを表示したままAppBarを非表示にする方法を以下に示します。
筆者はFlutter初学者なので、誤りがあればご指摘いただけると幸いです。

やりかた

preferredSize: Size.fromHeight(0.0) プロパティを指定すればOK
正確には非表示にするというよりも、高さを0にしています。

コード

import 'package:flutter/material.dart';

class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const EmptyAppBar({
    Key? key,
    this.trailingWidget,
  }) : super(key: key);

  final Widget? trailingWidget;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      elevation: 0,
      title: null,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(0.0);
}

Scaffold(
appBar: const EmptyAppBar(),
)

gistでコードを示しています。

併せて、 elevation: 0 によって影を無くしています。

経緯

簡単そうなことですが、自分で調べてみて出てきた記事で自分のやりたいことが実現できないものばかりだったので書きました。

出てきた他の方法は以下のような問題点がありました。

AppBarを透過にする方法
=> コンテンツ領域がズレてしまう。
それを回避するために extendBodyBehindAppBar: true を指定すると、ステータスバーとコンテンツが重なってしまう。

Scaffold(appBar: Container()) を返す。
=> ステータスバーにプロパティを指定できない。