Image Load

Hello world, 

Dalam pembuatan aplikasi tidak akan lepas dari penggunaan warna. Mulai dari warna-warna utama, warna kombinasi hingga opacity dan lain-lain. Pada Flutter penggunaan warna biasanya sudah didukung dengan kode bawaan yaitu menggunakan widget Color atau Colors. Apa Bedanya? Begini kira2.

Penggunaan Colors biasanya sudah dibantu dengan pilihan warna dari flutter dengan contoh seperti berikut

Colors.blue
Colors.red
Colors.amber

Atau bisa juga ditambah dengan tingkatan warna seperti berikut.

Colors.blue[100]
Colors.amber[400]
Colors.teal[900]

Selebihnya untuk pilihan warna lainnya bisa kalian lihat di sini.

Lalu bagaimana jika kita punya kode HEX sendiri untuk digunakan? seperti contohnya kode warna #F0F0F0 atau #C12E22 dan lain-lain. Untuk saat ini ada 2 cara yang bisa saya berikan sebagai referensi. Yaitu yang pertama adalah dengan Color dan yang kedua adalah dengan from_css_color.

Sebagai contoh penggunaan Color adalah sebagai berikut ini. 

Color(0xFFF0F0F0)
Color(0xFFC12E22)


Pada penggunaan Color kode HEX tidak menggunakan tanda pagar '#'. Tanda pagar '#' pada kode HEX digantikan dengan '0xFF'. Sedangkan untuk penggunaan HEX dengan tanda pagar kita bisa menggunakan from_css_color seperti berikut.

Tambahkan from_css_color pada dependencies di file pubspec.yaml

dependencies:
  from_css_color: ^2.0.0

lalu import pada halaman yang akan menggunakan from_css_color

import 'package:from_css_color/from_css_color.dart';

Selanjutnya kita tinggal menggunakannya dengan cara berikut.

fromCssColor('#F0F0F0')
fromCssColor('#C12E22 ')


Dalam penggunaan lain kita juga bisa menampilkan warna dengan rgba seperti berikut.

fromCssColor('rgb(100, 5, 32)')


Selain itu dengan from_css_color kita juga bisa mengecek kode warna yang akan ditampilkan valid atau tidak dengan cara seperti berikut.

var checkCorrectHex = isCssColor('#fbafba'); // true 
var checkIncorrectHex = isCssColor('#f'); // false

var checkCorrectRgb = isCssColor('rgb(100, 5, 32)'); // true 
var checkIncorrectRgb = isCssColor('rgb(100,100)'); // false


Begitu kira-kira, selanjutnya jika ada referensi cara lain dalam menampilkan warna maka akan saya buatkan postingan secara terpisah.

Selamat mencoba :)