【Flutter】透明な没入型ステータスバーを完成させる方法

---

序文

以前は透明な没入型ステータス バーが必要でしたが、途中でいくつかの問題に遭遇し、それらを記録して、困っている友人に道を示しました。

---

1. デフォルトのステータスバー

デフォルトのステータス バーにはほとんどがシステム独自の UI があり、アプリと一貫性がないように見えることがよくあります。

2.ステータスバーを変更する

1. 基本的な没入型ステータス バー

main.dart を変更する

void main() {
    
    
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    //设置状态栏颜色
    statusBarColor: Colors.transparent,
  ));
  runApp(const MyApp());
}

効果は次の図のとおりです。

2.透明な没入型ステータスバー

しかし、透明な没入型ステータス バーが必要なので、Appbar でそれを行います。

AppBar(
   title: const Text("视频示例"),
   //设置appbar背景色透明
   backgroundColor: Colors.transparent,
   //阴影设置为0
   elevation: 0,
      ),

その効果は図のとおりです。

なんということでしょう、一見ステータスバーが消えたかと思いました。

3.透明な没入型ステータスバーを最適化する

では、最適化して、ステータス バーのフォントとタイトルのフォントの色を変更して、見えるようにします。
次の行に注意して、ステータス バーのフォントを黒に変更してください:
systemOverlayStyle: SystemUiOverlayStyle.dark,

AppBar(
   //修改状态栏字体颜色
   systemOverlayStyle: SystemUiOverlayStyle.dark,
   title: const Text(
     "视频示例",
   style: TextStyle(color: Colors.black, fontSize: 17),
   ),
   backgroundColor: Colors.transparent,
   elevation: 0,
   ),

効果は次の図のとおりです。

---

エピローグ

実装時は色々記事を読みましたが、完成度は高くなく、実装後は一人で全行程を整理しておりますので、困っているお友達の参考になれば幸いです！