シードから作るアプリのテーマ

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

アプリのすべてのボタン、スイッチ、スライダーの色は、アプリのテーマという1か所から設定されます。テーマを変更すると、ボタンを1つも触らなくても、アプリ全体がそれに合わせて変わります。

MaterialAppで設定します。最も手早くテーマを作るには、1つのシードカラーから始めます。

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeedは、シードカラーをもとに、調和する色のセットを作ります。ボタンやリンクに使うはっきりとしたprimary、塗りつぶし領域に使う柔らかなprimaryContainer、背景に使うsurface、そしてそれぞれの上に表示するテキストの色が含まれます。これらはシードカラーの色調なので、ボタンのオレンジはColors.orangeそのものではありませんが、はっきりとオレンジに見え、読みやすい色です。

これまで見てきた紫色は、Flutterのデフォルトのシードカラーです。

チャレンジ

簡単

Garden Journal に緑色のテーマを設定します。MaterialApp の theme: を、色スキームがシード Colors.green から生成される ThemeData に設定します。変更を加えなくても、両方のボタンが緑色になります。

自分で試してみよう

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}