Flutter Design – Berbagi Tema (Warna dan Font Style)

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Update UI Berbasis Orientasi Layar

Pada artikel sebelumnya (Cara Menggunakan Widget Text Pada Flutter) kita belajar cara mengatur warna teks, background dan font style. Namun kita hanya dapat mengatur warna teks, background dan font style teks tertentu saja, sehingga jika ingin menggunakan preset yang sama untuk teks, background dan font style di halaman atau route lain maka kita harus mengatur ulang preset tersebut.

Oleh karena itu pada artikel kali ini kita akan belajar cara menggunakan ThemeData agar kita dapat membagi preset tema yang sudah kita atur ke semua route aplikasi. Langkah-langkahnya sebagai berikut:

1. Membuat Tema Aplikasi

Langkah pertama, gunakan ThemeData di konstruktor MaterialApp supaya kita dapat membagi tema ke seluruh bagian aplikasi. Namun jika kita tidak membuat preset tema, Flutter akan menyediakan tema default yang secara otomatis diterapkan pada aplikasi.

MaterialApp(
  title: title,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  )
);

Lihat pada halaman website dokumentasi ThemeData, untuk melihat warna dan font style yang dapat kita definisikan.

2. Tema Untuk Bagian-Bagian Aplikasi

Pada langkah ini akan dijelaskan cara agar kita dapat mengatur tema aplikasi pada bagian tertentu saja, tanpa merubah ThemeData yang sudah kita atur sebelumnya. Ada 2 cara:

1. Membuat ThemeData yang unik
2. Melakukan extending pada parent theme

1. Membuat ThemeData yang unik

Langkah ini dilakukan apabila kita tidak ingin mewariskan warna atau font style apa pun ke bagian aplikasi lain. Buat instance ThemeData() dan teruskan ke widget Theme.

Theme(
  // Create a unique theme with "ThemeData"
  data: ThemeData(
    accentColor: Colors.yellow,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

2. Melakukan extending pada parent theme

Daripada kita menimpa preset tema yang sudah dibuat pada ThemeData (Langkah 1), maka dengan menggunakan method copyWith( ) kita dapat meng-extend parent theme. 

Theme(
  // Find and extend the parent theme using "copyWith". See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

3. Menggunakan Tema

Setelah kita mendefinisikan preset tema sesuai kebutuhan, kita dapat gunakan tema tersebut dengan method build() widget (dalam hal ini yaitu method Theme.of(context)).

Cara kerjanya, method Theme.of(context) akan mencari widget tree dan mengembalikan Theme terdekat dari widget tree tersebut. Artinya, jika kita memiliki standalone Theme yang sudah didefinisikan sebelumnya (seperti Langkah 1) maka Theme tersebutlah yang akan digunakan, namun jika tidak memiliki standalone Theme maka tema default yang akan digunakan.

Contoh berikut terlihat FloatingActionButton menggunakan teknik di atas untuk menemukan accentColor.

Container(
  color: Theme.of(context).accentColor,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.headline6,
  ),
);

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya:

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Anton Prafanto

Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda

all author posts