Tutorial Membuat Custom Warna di Flutter

Azhar Rivaldi    11/11/2022    Tutorial Flutter    Comment   

Baca Juga

Tutorial Membuat Custom Warna di Flutter

Halo sobat 48 😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Pada kesempatan kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Custom Warna di Flutter.

Sebenarnya di Flutter itu sudah ada warna bawaan yang ada pada Class MaterialColor. Tapi kalau kalian ingin membuat pewarnaan sendiri pada aplikasi, kalian harus membuat daftar kode warna dulu dan kebayang kalau kita harus menulis manual setiap butuh warnanya.

Pada tulisan kali ini saya akan membagikan tips yang saya gunakan untuk membuat custom warna sendiri. Berikut ini adalah cara yang saya gunakan:

1. Masukan kode warna yang akan digunakan

Nah untuk menentukan kode warna yang akan saya gunakan, biasanya saya menggunakan aplikasi Material Color. Untuk gambaran aplikasinya, ada pada gambar diatas artikel ini ya. Jadi, kalian bisa menentukan warna apa saja yang ingin kalian pakai beserta kode warnanya.

2. Buat Class Custom Color

Selanjutnya kalian buat Class dengan nama custom_warna.dart. Untuk isi Class-nya seperti ini:

class CustomColor {
  static final _primary = 0xffF66257;

  final colorPrimary = MaterialColor(_primary, {
    50: Color(0xffFEECEB),
    100: Color(0xffFCC7C3),
    200: Color(0xffFAA19B),
    300: Color(0xffF88279),
    400: Color(_primary),
    500: Color(0xffF44336),
    600: Color(0xffD63B2F),
    700: Color(0xffB73229),
    800: Color(0xff992A22),
    900: Color(0xff7A221B)
  });
}

Class ini bisa kalian gunakan pada kelas MyApp.dart atau pada theme property setiap widget yang ingin kalian ubah dengan warna ini.

3. Tambah Warna di Class Custom Color

Lanjut, sekarang coba kalian ubah Class tadi dan tambahkan kode warna untuk warna putih, hitam dan biru:

class CustomColor {
  static final _primary = 0xffF66257;
  
  final colorPrimary = MaterialColor(_primary, {
    50: Color(0xffFEECEB),
    100: Color(0xffFCC7C3),
    200: Color(0xffFAA19B),
    300: Color(0xffF88279),
    400: Color(_primary),
    500: Color(0xffF44336),
    600: Color(0xffD63B2F),
    700: Color(0xffB73229),
    800: Color(0xff992A22),
    900: Color(0xff7A221B),
  });

  final ColorSwatch colors = ColorSwatch(_primary, {
    'hitam': Color(0xff000000),
    'putih': Color(0xffffffff),
    'biru': Color(0xFF2196F3)
  });
}

Yeay! Sekarang kalian udah bisa nih bikin Class khusus warna di Flutter

4. Cara Menggunakan Class Custom Color

Sebagai contoh pewarnaan aplikasi, bisa kalian coba saja New Project Flutter di Android Studio atau di VS Code ya.

Buka Class main.dart kemudian tambahkan ThemeData. Lalu masukan warna yang sudah kita buat pada property primarySwatch : new CustomColor().colorPrimary. Berikut penulisannya:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(),
      theme: ThemeData(
        primarySwatch: new CustomColor().colorPrimary,
      ),
    );
  }
}

Atau bisa juga dengan cara membuat Custom Widget seperti ini:

void main() {
  runApp(MyApp());
}

final myTheme = new CustomColor();

_contohWidget() {
  return Container(height: 100, width: 100, color: myTheme.colors['biru']);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _contohWidget(),
      theme: ThemeData(
        primarySwatch: new CustomColor().colorPrimary,
      ),
    );
  }
} 

5. Kelemahan Class Custom Color

Masalah yang akan timbul jika kalian menggunakan Custom Color ini adalah : Jika jumlah warna yang digunakan banyak maka akan susah mengingatnya, Solusinya adalah : Update Class custom_warna.dart menjadi seperti ini:

const String HITAM = "hitam";
const String PUTIH = "putih";
const String BIRU = "BIRU";

class CustomColor {
  static final _primary = 0xffF66257;
  final colorPrimary = MaterialColor(_primary, {
    50: Color(0xffFEECEB),
    100: Color(0xffFCC7C3),
    200: Color(0xffFAA19B),
    300: Color(0xffF88279),
    400: Color(_primary),
    500: Color(0xffF44336),
    600: Color(0xffD63B2F),
    700: Color(0xffB73229),
    800: Color(0xff992A22),
    900: Color(0xff7A221B),
  });

  final ColorSwatch colors = ColorSwatch(_primary, {
    HITAM: Color(0xff000000),
    PUTIH: Color(0xffffffff),
    BIRU: Color(0xFF2196F3)
  });
}

Oh ya, pastikan penulisan variabel constanta (cons) ada diluar Class agar tidak perlu menuliskan nama kelasnya.

Untuk cara memanggilanya seperti ini ya:

void main() {
  runApp(MyApp());
}

final myTheme = new CustomColor();

_contohWidget() {
  return Container(height: 100, width: 100, color: myTheme.colors[HITAM]);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _contohWidget(),
      theme: ThemeData(
        primarySwatch: new CustomColor().colorPrimary,
      ),
    );
  }
}

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :

https://sociabuzz.com/azharrvldi_/donate (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Custom Warna di Flutter ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_