Theme.of(context) Renkleri

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 22 / 30.

Düğmeler temayı kendiliğinden kullanır. Kendi kutularınız kullanmaz: Colors.teal.shade100 değerine sahip bir Container, tema ne olursa olsun o renkte kalır.

Kendi bileşenlerinizi temadaki renklere göre renklendirmek için temayı Theme.of(context) ile okuyun:

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

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

Renk şeması çiftler hâlinde gelir. primaryContainer yumuşak bir dolgu rengidir; onPrimaryContainer ise okunması kolay olacak şekilde seçilen, bu dolgunun üzerindeki metnin rengidir. Aynı durum primary ve onPrimary, surface ve onSurface için de geçerlidir.

Theme.of(context), onu isteyen bileşenin üstündeki temayı bulur. Tema MaterialApp tarafından ayarlanır; bu nedenle context, onun altındaki bir bağlama ait olmalıdır; örneğin HomeScreen'in build metodu. MaterialApp'in üstünde bulunan MyApp'in kendi build metodunda ise yalnızca Flutter'ın varsayılan mor rengini bulur.

Görev

Kolay

Başlığı temadan renklendir, böylece seçtiğin herhangi bir başlangıç rengiyle uyum sağlar:

HomeScreen'in build metodunun en üstünde: final colors = Theme.of(context).colorScheme;
başlığın rengi: colors.primaryContainer
metin rengi: colors.onPrimaryContainer

Kendin dene

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