Theme.of(context)-Farben

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 22 von 30.

Schaltflächen übernehmen das Design von selbst. Deine eigenen Kästen tun das nicht: Ein Container mit Colors.teal.shade100 behält diese Farbe, unabhängig vom Design.

Um deine eigenen Widgets mit Farben aus dem Design zu versehen, rufe es mit Theme.of(context) ab:

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

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

Das Farbschema besteht aus Paaren. primaryContainer ist eine dezente Füllfarbe, und onPrimaryContainer ist die Farbe des Textes auf dieser Füllung, die so gewählt ist, dass er gut lesbar ist. Dasselbe gilt für primary und onPrimary, surface und onSurface.

Theme.of(context) findet das Design oberhalb des Widgets, das danach fragt. Das Design wird von MaterialApp festgelegt, daher muss der context unterhalb davon liegen, etwa im build von HomeScreen. Im eigenen build von MyApp, das oberhalb von MaterialApp liegt, findet es nur Flutters standardmäßiges Lila.

Aufgabe

Einfach

Färbe das Banner mithilfe des Themes ein, damit es jedem Seed folgt, den du auswählst:

am Anfang von HomeScreens build: final colors = Theme.of(context).colorScheme;
die Farbe des Banners: colors.primaryContainer
die Textfarbe: colors.onPrimaryContainer

Probier es selbst

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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}