Apa itu Skema Warna?
Flutter, ColorScheme adalah kumpulan warna komprehensif yang digunakan untuk menentukan palet warna antarmuka pengguna (UI) aplikasi Anda. Ini adalah bagian dari material perpustakaan, yang menyediakan cara yang konsisten dan kohesif untuk mengelola warna yang digunakan di seluruh aplikasi Anda. Kelas ini colorScheme dirancang untuk mencakup semua elemen utama dalam UI pada umumnya, memastikan aplikasi Anda mempertahankan tampilan dan nuansa yang seragam.
Properti Utama dari ColorScheme
ColorScheme mencakup total 45 warna, berikut adalah beberapa warna penting dan penggunaannya:
- primer : Warna utama aplikasi Anda, digunakan untuk elemen UI utama seperti bilah aplikasi dan tombol tindakan mengambang.
- primaryVariant : Varian warna primer yang lebih gelap.
- sekunder : Warna sekunder, digunakan untuk memberi aksen pada bagian UI seperti tombol tindakan dan kontrol pilihan.
- SecondaryVariant : Varian warna sekunder yang lebih gelap.
- permukaan : Warna latar belakang untuk widget seperti kartu dan lembaran.
- background : Warna latar belakang keseluruhan untuk layar dan elemen UI yang lebih besar.
- error : Warna yang digunakan untuk menunjukkan kesalahan.
- onPrimary : Warna yang digunakan untuk teks dan ikon yang ditampilkan di atas warna primer.
- onSecondary : Warna yang digunakan untuk teks dan ikon yang ditampilkan di atas warna sekunder.
- onSurface : Warna yang digunakan untuk teks dan ikon yang ditampilkan di atas permukaan.
- onBackground : Warna yang digunakan untuk teks dan ikon yang ditampilkan di atas warna latar belakang.
- onError : Warna yang digunakan untuk teks dan ikon yang ditampilkan di atas warna kesalahan.
Contoh Mendefinisikannya colorScheme
Menerapkan Skema Warna ke Aplikasi Anda
Untuk menerapkannya colorScheme ke Aplikasi anda, anda dapat menggunakannya di dalam Theme : MaterialApp
Cara Membuat ColorScheme
Tantangan utama yang dihadapi pengembang adalah menciptakan colorScheme aplikasi yang sesuai. Untuk menghasilkan colorScheme pemberian warna secara manual ke kelas ColorScheme adalah proses yang sangat membosankan dan pengembang perlu mengetahui tujuan dari setiap warna di kelas.
Ada berbagai cara untuk menghasilkan ColorScheme dengan menentukan warna benih.
Skema Warna dari Seed
Menghasilkan skema warna lengkap berdasarkan satu warna benih, mengikuti prinsip Desain Material 3.
Manfaat:
- Efisiensi: Menciptakan skema yang kohesif dari satu masukan.
- Aksesibilitas: Memastikan kontras warna memenuhi standar aksesibilitas.
- Harmoni: Warna-warna berpadu dengan baik secara estetis.
Skema Warna dari Swatch
Buat skema warna dari MaterialColor contoh (satu set warna terkait).
Perhatian: Metode ini mungkin tidak digunakan lagi di versi flutter mendatang
Skema Warna dari ImageProvider
Fitur ini memungkinkan Anda membuat tema warna yang sesuai dengan warna pada gambar. Ia menggunakan alat khusus untuk menganalisis gambar dan memilih warna yang cocok dipadukan. Kami akan menjelaskan lebih lanjut tentang cara kerjanya di postingan mendatang.
Bagaimana ColorScheme dihasilkan?
Berikut penjelasan lebih dalam tentang cara ColorScheme menghasilkan produk di balik layar.
1. Konstruksi Palet Tonal:
- Ruang Warna HSL: Warna benih diubah menjadi ruang warna HSL (Hue, Saturation, Lightness). HSL sangat cocok untuk memanipulasi hubungan warna dengan tetap menjaga harmoni.
- Pelestarian Hue: Nilai Hue (mewakili warna itu sendiri) dari warna benih sebagian besar dipertahankan.
- Penyesuaian Lightness dan Saturation: Beberapa palet tonal dibuat dengan memvariasikan nilai Lightness dan Saturation warna benih secara sistematis. Hal ini menciptakan serangkaian warna yang lebih terang, lebih gelap, dan lebih atau kurang cerah yang berhubungan dengan warna benih.
2. Pemilihan Warna untuk Properti ColorScheme:
- Prinsip Desain Material: Algoritme yang telah ditentukan sebelumnya berdasarkan pedoman Desain Material digunakan untuk memilih warna tertentu dari palet tonal. Algoritme ini mempertimbangkan faktor-faktor seperti:
- Harmoni: Warna harus saling melengkapi dan menciptakan estetika visual yang menyenangkan.
- Kontras: Kontras yang cukup antara elemen latar depan dan latar belakang sangat penting untuk aksesibilitas.
- Keseimbangan: Skema warna harus seimbang, menghindari dominasi warna tunggal yang berlebihan.
ColorScheme dihasilkan berdasarkan palet warna untuk kecerahan yang diberikan.
Catatan tambahan:
- Warna Primer Tidak Tepat: Seperti disebutkan sebelumnya, primary warna yang dihasilkan colorscheme mungkin tidak sama persis dengan warna benih yang diberikan. Sebab, proses seleksinya mengutamakan prinsip Desain Material dan aksesibilitas dibandingkan pemetaan one-to-one yang ketat.
- Kustomisasi: Anda memiliki opsi untuk mengganti warna tertentu yang dihasilkan colorscheme menggunakan parameter tambahan pada fromseed konstruktor. Ini memungkinkan Anda menyempurnakan bagian tertentu dari tema warna.
Tetapi..
Membuat ColorScheme melalui kode tanpa memvisualisasikan semua warna yang dihasilkan tidaklah efisien. Jadi, daripada membuat ColorScheme secara manual, ada beberapa cara yang bisa kita lakukan melalui Material Theme Builder.
Pembuat Tema Material
Material Theme Builder adalah alat yang membantu Anda mendesain dan menyesuaikan tema berdasarkan Material Design 3 (M3). Ini memungkinkan Anda untuk:
- Visualisasikan warna dinamis: Bermain-main dengan kombinasi warna yang berbeda dan lihat pengaruhnya terhadap tema Anda secara real-time.
- Buat tema Desain Material 3 khusus: Rancang tema Anda menggunakan sistem warna M3 dan sertakan warna merek Anda.
- Hasilkan kode: Ekspor kode tema Anda dengan mudah dalam berbagai format, termasuk Flutter(Dart) , Android Views (XML), Jetpack Compose (Kotlin), dan Design System Package (DSP). Ini memudahkan untuk mengintegrasikan tema Anda ke dalam alur kerja pengembangan Anda.
Secara keseluruhan, Material Theme Builder menjembatani kesenjangan antara desain dan pengembangan dengan menyediakan antarmuka visual untuk membuat tema M3 dan menawarkan pembuatan kode untuk implementasi yang lancar. Ini juga dapat dibagikan dengan desainer untuk membuat warnanya dan membagikan kode flutter.
Selain menghasilkan warna, tema material sekarang juga memiliki dukungan untuk font sehingga kita dapat memilih font Google sesuai kebutuhan dan akan disertakan dalam kode yang dihasilkan. Kode yang dihasilkan berisi file berikut.
- ThemeData.dart
File ThemeData berisi terang, gelap, lightMediumContrast, darkMediumContrast, lightHighContrast, dan darkHighContrast ColorScheme.
- Util.dart
File ini berisi fungsi yang membuat Tema Teks berdasarkan font Google yang kami berikan.
- Utama.dart
File ini memiliki kode contoh yang menunjukkan cara menggunakan Generated ColorScheme dan TextThems.
Kesimpulan
Seri Teknik Tema Tingkat Lanjut memberdayakan Anda untuk mendesain skema warna yang menawan untuk aplikasi Flutter Anda. Kami menjelajahi ColorScheme perannya dalam menentukan warna aplikasi Anda. Kami mengatasi tantangan definisi warna manual dan menemukan metode untuk menghasilkan skema menggunakan warna benih. Material Theme Builder muncul sebagai pahlawan, memungkinkan Anda memvisualisasikan kombinasi warna dan menghasilkan kode yang terintegrasi dengan pengembangan Flutter Anda. Bahkan mendukung pemilihan Font Google untuk solusi desain yang lengkap. Dengan pengetahuan dan Pembuat Tema Material ini, Anda dapat membuat skema warna menakjubkan yang membawa aplikasi Flutter Anda ke level berikutnya.
Selamat Coding!