PCロール

PCロール

【Flutter】ステータスバーをライトモード・ダークモードに対応させる方法

【Flutter】ステータスバーをライトモード・ダークモードに対応させる方法

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

今回は、Flutterで開発する際に、ステータスバーの色をライトモードやダークモードに対応させる方法を紹介します。

はじめに

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

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

結論

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

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarIconBrightness:
        Theme.of(context).colorScheme.background.computeLuminance() < 0.5
            ? Brightness.light
            : Brightness.dark,
    statusBarBrightness:
        Theme.of(context).colorScheme.background.computeLuminance() < 0.5
            ? Brightness.dark
            : Brightness.light,
  ),
);

例

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

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

// class hoge extends hoge {
//  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarIconBrightness:
            Theme.of(context).colorScheme.background.computeLuminance() < 0.5
                ? Brightness.light
                : Brightness.dark,
        statusBarBrightness:
            Theme.of(context).colorScheme.background.computeLuminance() < 0.5
                ? Brightness.dark
                : Brightness.light,
      ),
    );
//    return Scaffold(
//      ...
//    );
//  ...

.computeLuminance()って何？という方はこちらの記事もご覧ください。

Flutterでの自動フォントカラー調整

もっと詳しく

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

SystemChrome Class - Flutter API

SystemChrome.setSystemUIOverlayStyle - Flutter API

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

← Back to home