Flutter アプリ開発の道〜その③ ダークモード〜

2021年5月30日 19:33

前回はサンプルアプリをWebブラウザ、Android端末、iOS端末のエミュレータで動作させる記事を書きました。

今回からFlutterサンプルプロジェクトを改造してノウハウを構築していきたいと思います。
さて、今回のお題の発表です。

ダークモード対応

今回はダークモード対応を記事のテーマにしていきたいと思います。
せっかくアプリを開発するのであれば、ダークモードに対応したアプリを開発したいです。
問題なのは、ダークモードを後から対応すると大変であるということです。
なので最初からダークモードに対応した開発をしていけば後からの対応がそれほど難しくなく対応できるはずです。

ダークモード時に表示が切り替える実装

まず、サンプルアプリのソースコードで表示の色を制御している箇所はどこかというと

main.dart ファイルの theme: ThemeData() の部分です。
（Android Studio でプロジェクトを開いています）

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       // This is the theme of your application.
       //
       // Try running your application with "flutter run". You'll see the
       // application has a blue toolbar. Then, without quitting the app, try
       // changing the primarySwatch below to Colors.green and then invoke
       // "hot reload" (press "r" in the console where you ran "flutter run",
       // or simply save your changes to "hot reload" in a Flutter IDE).
       // Notice that the counter didn't reset back to zero; the application
       // is not restarted.
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

ここに
darkTheme: ThemeData(brightness: Brightness.dark)
の記述を足します。
これでダークモード時にテーマが設定できます。
brightness: Brightness.dark はデフォルトで用意されているテーマです。
今回、細かいフォントは一旦考えず、ダークモード時にテーマが切り替わるかの確認を簡単にしたいと思います。

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       // This is the theme of your application.
       //
       // Try running your application with "flutter run". You'll see the
       // application has a blue toolbar. Then, without quitting the app, try
       // changing the primarySwatch below to Colors.green and then invoke
       // "hot reload" (press "r" in the console where you ran "flutter run",
       // or simply save your changes to "hot reload" in a Flutter IDE).
       // Notice that the counter didn't reset back to zero; the application
       // is not restarted.
       primarySwatch: Colors.blue,
     ),
     darkTheme: ThemeData(brightness: Brightness.dark),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}