Цвета Theme.of(context)

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 22 из 30.

Кнопки сами подхватывают тему. Ваши собственные контейнеры — нет: Container с Colors.teal.shade100 сохраняет этот цвет независимо от темы.

Чтобы окрашивать собственные виджеты цветами из темы, получите её с помощью 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 должен принадлежать виджету внутри него, например методу build у HomeScreen. В собственном методе build класса MyApp, который находится выше MaterialApp, будет найдена только фиолетовая тема Flutter по умолчанию.

Задание

Легко

Раскрась баннер цветом из темы, чтобы он соответствовал любому выбранному тобой начальному цвету:

в начале метода build класса HomeScreen: 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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}