💬

【Flutter】Androidのナビゲーションバーの背景色を透明にする

2023/06/28に公開

AndroidでFlutterで作成したアプリを実行した際に、ジェスチャーナビゲーションの背景色が白くなる&黒くなることに気になる人はいるだろうか?

おれはめっちゃ気になるのでこれをiPhoneみたいなイケてる感じにする方法を書いておく。

やり方

main.dartファイルのvoid main(){}に以下を追加するだけ。
パッケージの追加も忘れずに!

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';//追加

void main() {
  runApp(const MyApp());
  //ナビゲーションバーの背景色を透明にしてイケてるようにする(ここから追加)
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: [SystemUiOverlay.top]).then((_) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent,
    ));
  });
  //ナビゲーションバーの背景色を透明にしてイケてるようにする(ここまで追加)

}

結果

いい感じになったっしょ?

Discussion