Theme.of(context) の色

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

ボタンは自動的にテーマを反映します。自分で作ったボックスはそうではありません。Colors.teal.shade100を指定したContainerは、テーマにかかわらずその色のままです。

テーマから自分のウィジェットの色を取得するには、Theme.of(context)で読み取ります。

final colors = Theme.of(context).colorScheme;

Container(
  color: colors.primaryContainer,
  child: Text('Hi', style: TextStyle(color: colors.onPrimaryContainer)),
)

色の組み合わせはペアになっています。primaryContainerは柔らかな塗りつぶし色で、onPrimaryContainerはその塗りつぶし色の上に表示するテキストの色です。読みやすくなるように選ばれています。primaryとonPrimary、surfaceとonSurfaceも同様です。

Theme.of(context)は、それを要求するウィジェットの上位にあるテーマを探します。テーマはMaterialAppによって設定されるため、contextはその配下にある必要があります。たとえば、HomeScreenのbuild内のcontextです。MaterialAppより上位にあるMyApp自身のbuildでは、Flutterのデフォルトの紫色しか見つかりません。

チャレンジ

簡単

テーマの色でバナーを塗り、選んだシードカラーに追従するようにしましょう。

HomeScreenのbuildの先頭で：final colors = Theme.of(context).colorScheme;
バナーの色：colors.primaryContainer
テキストの色：colors.onPrimaryContainer

自分で試してみよう

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.teal),
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bookshelf')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text(
                'You read 12 books this year',
                style: TextStyle(fontSize: 20, color: Colors.teal.shade900),
              ),
            ),
          ],
        ),
      ),
    );
  }
}