Bir Tohumdan Uygulama Teması

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

Uygulamanızdaki her düğme, anahtar ve kaydırıcı renklerini tek bir yerden alır: uygulamanın teması. Temayı değiştirin; tek bir düğmeye bile dokunmadan uygulamanın tamamı onunla birlikte değişsin.

Temayı MaterialApp üzerinde ayarlarsınız. Bir tema oluşturmanın en hızlı yolu, tek bir başlangıç renginden yola çıkmaktır:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeed, başlangıç renginden birbiriyle uyumlu renklerden oluşan bir palet oluşturur: düğmeler ve bağlantılar için canlı bir primary, doldurulmuş alanlar için yumuşak bir primaryContainer, arka plan için bir surface ve her birinin üzerinde yer alan metnin renkleri. Bunlar başlangıç renginin tonlarıdır; bu yüzden bir düğmedeki turuncu tam olarak Colors.orange değildir, ancak açıkça turuncudur ve kolayca okunur.

Şimdiye kadar gördüğünüz mor, Flutter'ın varsayılan başlangıç rengidir.

Görev

Kolay

Garden Journal'a yeşil bir tema verin: MaterialApp'ın theme: değerini, renk şeması Colors.green başlangıç değerinden gelen bir ThemeData olarak ayarlayın. Her iki düğme de değiştirilmeden yeşile döner.

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}