Pernah merasa desain aplikasi yang kamu buat terasa kaku dan membosankan? Dynamic color di Flutter bisa jadi solusi yang kamu cari! Melalui adanya dynamic color, kamu dapat menghadirkan pengalaman visual yang lebih hidup dan terhubung langsung dengan preferensi pengguna.
Tidak perlu lagi mengatur skema warna manual yang terbatas. Dynamic color memungkinkan aplikasi kamu tampil dengan warna yang sesuai berdasarkan tema perangkat pengguna, membuatnya terasa lebih personal dan relevan. Ingin tahu cara menerapkannya? Mari kita bahas lebih lanjut!
Sebelum melanjutkan blog ini, pastikan kamu membuka blog sebelumnya terkait dynamic color, ya. Mengapa perlu cek blog sebelumnya? Supaya kamu ada gambaran perbedaan dynamic color dengan static color pada Material Design.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar Sekarang
Penerapan Tema Aplikasi
Sebagai developer yang baru memulai belajar Flutter, pasti memiliki banyak pertanyaan tentang penerapan tema pada aplikasi Flutter. Bagaimana, sih, caranya?
Penerapan tema pada aplikasi sangatlah mudah. Anggaplah, kamu sudah memiliki parent widget atau widget induk MaterialApp dalam proyek Flutter. Widget tersebut memiliki dua parameter yang mendukung tema aplikasi, yaitu theme dan darkTheme.
- Parameter theme digunakan untuk tema terang (light theme).
- Parameter darkTheme digunakan untuk tema gelap (dark theme).
Begini cara penerapannya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( // theme untuk mode terang theme: ThemeData(...), // darkTheme untuk mode gelap darkTheme: ThemeData(...), initialRoute: '/', routes: {...}, ); } } |
Setelah itu, sisipkan warna yang kamu inginkan melalui parameter colorScheme pada ThemeData.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { final colorScheme = ColorScheme.fromSeed(seedColor: Colors.indigo); return MaterialApp( theme: ThemeData( colorScheme: colorScheme, ), darkTheme: ThemeData( colorScheme: colorScheme, ), initialRoute: '/', routes: {...}, ); } } |
Kamu bisa menambahkan parameter themeMode. Parameter ini berguna untuk mengubah mode tema. Ada tiga konstanta yang dapat digunakan, yaitu light untuk mode terang, dark untuk mode gelap, dan system untuk mengikuti tema perangkat. Berikut penerapannya dalam kode.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(...), darkTheme: ThemeData(...), // themeMode untuk mengalihkan tema menjadi terang, gelap, atau adaptif sesuai perangkat themeMode: ThemeMode.system, initialRoute: '/', routes: {...}, ); } } |
Akan lebih menarik lagi, kalau kamu menyediakan pengaturan untuk mengubah mode tema secara fleksibel pada aplikasi. Dengan begitu, pengguna akan lebih leluasa dalam mengatur tema aplikasi.
Penerapan Tema Berdasarkan Wallpaper Perangkat
Nah, ini yang ditunggu-tunggu. Gimana cara tema aplikasi dapat menyesuaikan wallpaper perangkat? Yup, kita bisa memanfaatkan user-generated color dalam Material Design.
Pada Flutter, kita cukup menambahkan package dynamic_color pada proyek. Package ini digunakan untuk mendapatkan skema warna terpilih dari perangkat. Dengan begitu, kita bisa menerapkannya pada aplikasi.
Langkah pertama yang harus dilakukan adalah menginstal package dynamic_color pada proyek Flutter. Cukup menambahkan package tersebut pada berkas pubspec.yaml.
|
1 2 3 4 5 6 7 |
... dependencies: dynamic_color: <latest-version> ... ... |
Selanjutnya, jalankan perintah berikut untuk menginstal package-nya.
|
1 |
flutter pub get |
Untuk menerapkan warna tema ke seluruh bagian aplikasi, kita dapat memanfaatkan widget bernama DynamicColorBuilder. Widget inilah yang dipakai untuk mengubah warna tema berdasarkan preferensi pengguna.
Kita dapat menambahkan widget DynamicColorBuilder melalui MaterialApp. Tinggal bungkus widget MaterialApp dengan DynamicColorBuilder. Alhasil, kodenya seperti berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return DynamicColorBuilder(builder: (lightDynamic, darkDynamic) { return MaterialApp( theme: ThemeData(...), darkTheme: ThemeData(...), themeMode: ThemeMode.system, initialRoute: '/', routes: {...}, ); }); } } |
Pada widget DynamicColorBuilder, ada dua parameter yang bisa dipakai sebagai tema aplikasi, yaitu lightDynamic dan darkDynamic. Kedua parameter tersebut adalah warna tema dari perangkat. Kita bisa implementasikan kedua tema tersebut ke aplikasi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { final colorScheme = ColorScheme.fromSeed(seedColor: Colors.indigo); return DynamicColorBuilder(builder: (lightDynamic, darkDynamic) { return MaterialApp( theme: ThemeData( colorScheme: lightDynamic ?? colorScheme, ), darkTheme: ThemeData( colorScheme: darkDynamic ?? colorScheme, ), themeMode: ThemeMode.system, initialRoute: '/', routes: {...}, ); }); } } |
Mengapa kita perlu menambahkan operator if-null “??”? Operator tersebut digunakan ketika nilai yang di depan bernilai null, ThemeData akan mengambil alih tema aplikasi, pada kasus ini adalah lightDynamic ataupun darkDynamic.
Bisa jadi, aplikasi kita berjalan pada platform selain Android, seperti iOS, web, atau desktop. Platform tersebut secara default tidak menggunakan Material Design pada perangkatnya. Alhasil, kita tetap menyediakan tema bawaan agar menampilkan warna sesuai keinginan developer.
Mari kita lihat hasilnya.
Setelah skema warna pada perangkat berubah, tema aplikasi pun juga ikut berubah secara otomatis. Kita tidak perlu memberikan state atau variabel tertentu untuk mengubah tema.
Sudah? Ya, cuma gitu saja. Gampang, kan?
Penerapan Tema Berdasarkan Konten Gambar
Ada hal lain yang bisa kita tingkatkan agar aplikasi menjadi lebih keren.
Pernahkah melihat aplikasi musik, seperti YouTube Music atau lainnya? Warna komponen pada halaman menyerupai warna foto albumnya. Setiap ganti musik, komponen pada halaman tersebut berubah menyesuaikan dengan warna foto album.
Warna komponen pada halaman berbeda-beda, walaupun halamannya sama. Mengapa bisa seperti itu?
Hal ini karena ia memanfaatkan content-based color. Artinya, warna didapatkan dari sumber gambar tertentu. Dengan begitu, halaman aplikasi tetap sama, tetapi warna komponen dapat menyesuaikan dengan gambar.
Apakah di Flutter bisa menerapkan hal seperti itu? Tentu bisa!
Flutter menyediakan package bernama palette_generator untuk mendapatkan warna dari sumber gambar.
Caranya cukup menambahkan package palette_generator ke project Flutter melalui berkas pubspec.yaml.
|
1 2 3 4 5 6 7 8 |
... dependencies: dynamic_color: <latest-version> palette_generator: <latest-version> ... ... |
Selanjutnya, jalankan perintah berikut agar package terinstal dengan benar.
|
1 |
flutter pub get |
Berikutnya, kita bisa memanfaatkan instance PaletteGenerator untuk mendapatkan warna dari sumber. Ada tiga method yang bisa dipakai untuk memperoleh warna dari gambar.
- fromByteData, mendapatkan warna dengan memanfaatkan gambar dari data byte.
- fromImage, memperoleh data warna melalui instance gambar Image.
- fromImageProvider, mendapatkan warna dari instance gambar ImageProvider.
Method di atas bertipe data Future. Artinya, kita perlu menjalankan proses asinkron untuk mendapatkan warna dari gambar.
Cara yang paling mudah untuk menerapkan PaletteGenerator adalah meletakkannya pada proses navigasi halaman. Alhasil, ketika pengguna menekan tombol tertentu, PaletteGenerator dipanggil, dan disisipkan melalui proses navigasi halaman.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return ItemRestaurant( restaurant: item, onTap: () async { final router = context.read<MyGoRouter>().router; final paletteGenerator = await PaletteGenerator.fromImageProvider( NetworkImage(item.linkLargePicture), ); router.go( "/restaurant/detail/${item.id}", extra: paletteGenerator, ); }, ); |
Kemudian, kita tinggal memanfaatkan objek PaletteGenerator pada halaman detail.
Ada enam warna yang dihasilkan dari generator.
- Light Vibrant
- Vibrant
- Dark Vibrant
- Light Muted
- Muted
- Dark Muted
Secara tidak langsung, ia terbagi menjadi dua bagian, yaitu vibrant dan muted. Warna vibrant biasanya diambil dari warna terang yang sering muncul pada gambar, sedangkan muted adalah warna gelap yang sering muncul. Sebagai gambaran, penerapan keenam warna hasil generator seperti berikut.
Setelah warna didapatkan, kita bisa memanfaatkannya pada background, teks, tombol, dll.
Misalnya, kita manfaatkan warna generator pada teks. Kamu cukup menambahkannya pada tema textTheme dan sisipkan warna pada parameter color.
|
1 2 3 4 5 6 7 8 9 10 11 |
// definisikan warna untuk teks final headerColor = paletteGenerator?.darkMutedColor?.color; // terapkan warna pada teks Text( restaurant.name, style: Theme.of(context) .textTheme .headlineSmall ?.copyWith(color: headerColor), ), |
Jika warna sudah diterapkan pada seluruh komponen halaman, kita bisa jalankan aplikasinya.
Mantap! Mudah, kan?
Kesimpulan
Menggunakan dynamic color di Flutter memberikan fleksibilitas dan personalisasi lebih baik bagi aplikasi yang kamu buat. Dengan menerapkan tema sesuai wallpaper perangkat atau konten gambar, aplikasi dapat menyesuaikan tampilannya secara otomatis.
Penggunaan dynamic color juga mempermudah pengembang dalam menghadirkan desain yang konsisten tanpa harus mengatur skema warna secara manual. Dengan begitu, aplikasi kamu tidak hanya lebih estetis, tetapi juga lebih responsif terhadap preferensi dan gaya visual perangkat pengguna.
Jika ingin mempelajari lebih lanjut dan menerapkan dynamic color secara maksimal, kamu bisa mengikuti kelas dalam Learning Path Multi-platform App. Di sana, kamu akan belajar tidak hanya tentang dynamic color, tetapi juga berbagai fitur canggih lainnya dalam Flutter. Jangan lewatkan kesempatan untuk meningkatkan skill-mu serta membuat aplikasi yang lebih interaktif dan responsif!
