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

2022.12.05

この記事は、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 ロールでは、テクノロジーに関する情報をまとめて発信しています。また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。