Tema Aplikasi dari Seed

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

Setiap tombol, switch, dan slider di aplikasimu mengambil warnanya dari satu tempat: tema aplikasi. Ubah tema, lalu seluruh aplikasi ikut berubah tanpa menyentuh satu tombol pun.

Kamu mengaturnya di MaterialApp. Cara tercepat untuk membuatnya adalah dengan memulai dari satu warna dasar:

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

ColorScheme.fromSeed membuat satu set warna yang serasi dari warna dasar: primary yang kuat untuk tombol dan tautan, primaryContainer yang lembut untuk area berisi warna, surface untuk latar belakang, serta warna teks yang ditampilkan di atas masing-masing area. Semuanya merupakan rona dari warna dasar, jadi warna oranye pada tombol tidak persis sama dengan Colors.orange, tetapi tetap jelas terlihat oranye dan mudah dibaca.

Warna ungu yang kamu lihat sejauh ini adalah warna dasar default Flutter.

Tantangan

Mudah

Beri Garden Journal tema hijau: atur theme: milik MaterialApp ke ThemeData yang skema warnanya berasal dari seed Colors.green. Kedua tombol akan berubah menjadi hijau tanpa perlu diubah.

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