50. Flutterでダークモードを設定する

Flutte でiOSのダークモードを設定するする方法が分からなかったので備忘録として残しておきます。

尚、iOのシミュレータで試したい場合は設定アプリ上から

「Developer」 < 「Dark Appearance」

でスイッチを切り替えを行うと変わります。

設定アプリ

デフォルト	ダークモード
デフォルトモード	ダークモード

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Colors.white,
          primaryColorBrightness: Brightness.light,
          brightness: Brightness.light,
          primaryColorDark: Colors.black,
          canvasColor: Colors.white,
          // next line is important!
          appBarTheme: AppBarTheme(brightness: Brightness.light)),
      darkTheme: ThemeData(
          primaryColor: Colors.black,
          primaryColorBrightness: Brightness.dark,
          primaryColorLight: Colors.black,
          brightness: Brightness.dark,
          primaryColorDark: Colors.black,
          indicatorColor: Colors.white,
          canvasColor: Colors.black,
          // next line is important!
          appBarTheme: AppBarTheme(brightness: Brightness.dark)),
      title: 'ダークモードのアプリ',
      home: HomePage(title: '見つける'),
    );
  }
}

参考

Stack Overflow

Flutter-How to change the Statusbar text color in Dark Mode?

https://stackoverflow.com/questions/58325556/flutter-how-to-change-the-statusbar-text-color-in-dark-mode

I hope to control the statusbar text color in iOS 13 Dark Mode. I could change the statusbar color by setting the Scaffold's AppBar property "brightness" When not open the Dark Mode. Codes just like

また、片方のテーマだけで良い場合は MaterialApp の themeMode を指定すればライトモードかダークモードに指定できます。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      /// ライトモード
      themeMode: ThemeMode.light,
      title: 'Apple Music Clone',
      home: HomePage(title: '見つける'),
    );
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      /// ダークモード
      themeMode: ThemeMode.dark,
      title: 'Apple Music Clone',
      home: HomePage(title: '見つける'),
    );
  }
}

それでは、バイバイ。