ダークモードの切り替え

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 25/30。

アプリによってはダークモードにしたいけれど、ほかのアプリではそうしたくない人もいます。切り替えスイッチを用意しましょう。

themeMode:はほかの設定と同じなので、状態から設定できます。MaterialAppを構築するウィジェットであるMyAppのStateにboolを保持し、それに応じてモードを選びます。

bool _dark = false;

MaterialApp(
  themeMode: _dark ? ThemeMode.dark : ThemeMode.light,
  ...
)

スイッチを切り替えてsetState内の_darkが変わると、buildが再び実行され、MaterialAppに新しいモードが設定されます。すると短いフェードとともに、すべての画面のテーマが一度に切り替わります。

テーマを選ぶ場所より上位に状態を置く必要があります。そのため、ここではMyAppをStatefulWidgetにしています。

チャレンジ

簡単

スイッチを切り替えるとテーマが切り替わるようにします。

onChanged内で、setStateの中に新しい値を_darkへ保存します
MaterialAppのthemeMode:を_darkに応じて設定します。trueの場合はダーク、falseの場合はライトにします

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Dark mode', style: TextStyle(fontSize: 20)),
              const SizedBox(width: 12),
              Switch(
                value: _dark,
                onChanged: (value) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}