ダークテーマ

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

多くの人はスマートフォンをダークモードにしており、特に夜間はそうです。アプリには2つのテーマを設定できます。ライト用のtheme:と、ダーク用のdarkTheme:です。

ダークカラースキームは、同じシードにもう1つ設定を加えて作成します。

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.dark,
  home: ...,
)

brightness: Brightness.darkを指定すると、カラースキームが反転します。暗いsurfaceに明るいonSurfaceのテキストを組み合わせ、シードの色調もまぶしくならないように柔らかくなります。

themeMode:は、どのテーマを使用するかを選択します。デフォルトのThemeMode.systemはスマートフォンの設定に従います。ThemeMode.lightとThemeMode.darkは、スマートフォンの設定にかかわらず、どちらか一方を選びます。テーマを参照するすべてのウィジェットが、それに応じて変わります。

チャレンジ

簡単

Night Readerをダークな見た目にしましょう：

シード Colors.indigo を使った darkTheme: と、brightness: Brightness.dark
themeMode: ThemeMode.dark を設定して、常にダークモードにする

自分で試してみよう

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: const Center(
          child: Text('Good evening', style: TextStyle(fontSize: 28)),
        ),
      ),
    );
  }
}