Warna Theme.of(context)

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 22 dari 30.

Tombol menyesuaikan diri dengan tema. Kotak buatanmu sendiri tidak: Container dengan Colors.teal.shade100 akan tetap berwarna itu apa pun temanya.

Untuk mewarnai widget buatanmu sendiri berdasarkan tema, ambil temanya dengan Theme.of(context):

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

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

Skema warna hadir berpasangan. primaryContainer adalah isian lembut, dan onPrimaryContainer adalah warna teks di atas isian itu, yang dipilih agar mudah dibaca. Hal yang sama berlaku untuk primary dan onPrimary, surface dan onSurface.

Theme.of(context) mencari tema di atas widget yang memintanya. Tema ditetapkan oleh MaterialApp, jadi context harus berada di bawahnya, seperti pada build milik HomeScreen. Di dalam build milik MyApp sendiri, yang berada di atas MaterialApp, yang ditemukan hanya warna ungu default Flutter.

Tantangan

Mudah

Warnai banner dari tema agar mengikuti seed apa pun yang kamu pilih:

di bagian atas HomeScreen's build: final colors = Theme.of(context).colorScheme;
warna banner: colors.primaryContainer
warna teksnya: colors.onPrimaryContainer

Coba sendiri

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