Flutter でステータスバーの文字色、アイコンの色を変更する

AppBar がない画面でステータスバーの色が文字色と同じになってしまい、文字が見えなくなってしまったので今回の実装を行いました。

ダークモード対応しているアプリでは、Theme に合わせて適宜設定を変更してください。

AppBar がない場合

    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: const SystemUiOverlayStyle(
            /// Android のステータスバーアイコンの色が変更される
            statusBarIconBrightness: Brightness.light,
            /// iOS のステータスバーの文字色が変更される
            statusBarBrightness: Brightness.light,
        ),
        child: Scaffold(...),
    );

AppBar がある場合

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'status bar color',
        ),
        brightness: Brightness.light, // 文字色が黒になる
        // brightness: Brightness.dark, // 文字色が白になる
      ),
      body: ...
    );

全体で設定する場合

    return MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          /// 全体に適用される
          brightness: Brightness.dark,
        ),
      ),
      home: HogePage(),
    );