【Flutter】ステータスバーに色をつける方法

2022.12.08

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

今回は、Flutterで開発する際に、ステータスバーに色を指定する方法を紹介します。

はじめに

スマホやタブレット画面上部で、時刻や電池残量などの情報が表示されている部分のことを、ステータスバー（Status Bar）といいます。

モバイルアプリ開発の際に、アプリ内で表示するステータスバーの背景色を指定することができます。

結論

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

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

例

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

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

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

もっと詳しく

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

SystemChrome Class - Flutter API

SystemChrome.setSystemUIOverlayStyle - Flutter API

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