【Flutter】 ナビゲーションバーに色をつける方法

この記事は、Gajeroll Advent Calendar 2022 の 5 日目の記事です。

今回は、Flutter で開発する際に、Android のナビゲーションバーに色を指定する方法を紹介します。

はじめに

スマホ画面下部のバーが表示されている部分のことを、ナビゲーションバー（Navigation Bar）といいます。

Flutter でモバイルアプリ開発をする際、特に Android では、ナビゲーションバーの色をページごとに指定しなければ、意図した通りの色にならないことがあります。

結論

SystemChrome.setSystemUIOverlayStyle()を使いましょう。

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue,
  ),
);

例

上のコードをコピーして、return Scaffold(...);などの直前に貼り付ければ OK です。

@overrideよりも下に貼り付けることに注意しましょう。

// class hoge extends hoge {
//  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.blue, // 色を指定
      ),
    );
//    return Scaffold(
//      ...
//    );
//  ...

最後に

より詳しく知りたい方はこちらをご覧ください。

SystemChrome Class - Flutter API

SystemChrome.setSystemUIOverlayStyle - Flutter API

最後までご覧いただきありがとうございます。 PC ロールでは、テクノロジーに関する情報をまとめて発信しています。 また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。 ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。