Tema & Styling Aplikasi

Mengatur warna dan gaya seluruh aplikasi dengan ThemeData dan ColorScheme, lalu memakainya lewat Theme.of(context).

Part 18 dari 23 ± 35 menit Gratis

Mengapa tema?

Bayangkan mengecat ulang warna utama aplikasi: tanpa tema kamu harus mengubah puluhan widget satu per satu. Dengan tema, kamu menentukan warna dan gaya sekali di satu tempat, dan seluruh aplikasi mengikutinya.

ThemeData di MaterialApp

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
    useMaterial3: true,
  ),
  home: const Halaman(),
)
  • ColorScheme.fromSeed membuat satu set warna serasi (utama, latar, aksen, teks) hanya dari satu warna benih. Kamu tidak perlu memilih belasan warna sendiri.
  • useMaterial3: true memakai tampilan Material 3 yang modern.

Memakai tema di widget

Ambil tema terdekat dengan Theme.of(context):

Text(
  'Judul Besar',
  style: Theme.of(context).textTheme.headlineMedium,
)

Container(
  color: Theme.of(context).colorScheme.primaryContainer,
  child: ...,
)
  • textTheme berisi gaya teks siap pakai: headlineMedium (judul), titleLarge, bodyMedium (isi biasa), dan lain-lain.
  • colorScheme berisi warna tema: primary, primaryContainer, secondary, surface, error.

Keuntungan

  • Mengganti Colors.teal menjadi Colors.indigo di satu tempat mengubah seluruh aplikasi.
  • Mudah membuat mode gelap: tambahkan darkTheme: ThemeData(brightness: Brightness.dark, ...).
  • Tampilan konsisten, karena semua widget memakai sumber gaya yang sama.

Aturan praktis: jangan menulis warna langsung (hard-code) di setiap widget; ambil dari tema.

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X