Image Load

Hello world, 

Button adalah komponen yang sangat sering digunakan dalam sebuah aplikasi karena menjadi komponen yang berfungsi untuk menjadi trigger sebuah aksi seperti aksi menyimpan data dari form ataupun tombol hapus. tombol edit, dll. Pada postingan sebelumnya saya pernah menulis tentang penggunaan RaisedButton yang memang sering sekali saya gunakan dalam membuat aplikasi. Akan tetapi pada update versi flutter ada beberapa perubahan dimana salah satunya adalah beberapa widget menjadi kadaluarsa dan harus diganti. Salah satu yang harus diganti adalah RaisedButton. 

Jika dalam aplikasi kita ada menggunakan RaisedButton maka Flutter akan memberi keterangan bahwa widget telah kadaluarsa dan flutter merekomendasikan untuk mengganti dengan ElevatedButton. Nah kali ini akan saya bahas mengenai bagaimana penggunaan ElevatedButton dan perbedaannya dengan RaisedButton. 

Untuk penggunaan sederhananya kira-kira seperti berikut.

ElevatedButton(
 style: ElevatedButton.styleFrom(
      primary: Colors.blue,
 ),
 child: Text('Simpan'),
 onPressed: () {
       //proses di sini
 },
),


Untuk penggunaan border dan radius seperti berikut.

ElevatedButton(
 style: ElevatedButton.styleFrom(
  primary: Colors.blue,
  shape: RoundedRectangleBorder(
   borderRadius: new BorderRadius.circular(50),
  ),
  padding:
  EdgeInsets.fromLTRB(30.0, 8.0, 30.0, 8.0),
 ),
 child: Text('Simpan'),
 onPressed: () {
  //proses di sini
 },
),


Ada juga penggunaan dengan konten button berisi icon seperti berikut.


ElevatedButton(
 style: ElevatedButton.styleFrom(
  primary: Colors.blue,
  shape: RoundedRectangleBorder(
   borderRadius: new BorderRadius.circular(50),
  ),
  padding:
  EdgeInsets.fromLTRB(30.0, 8.0, 30.0, 8.0),
 ),
 child: Container(
  child: Icon(
   Icons.arrow_right_alt,
   color: Colors.white,
   size: 40.0,
  )),
 onPressed: () {
  //proses di sini
 },
),


Selain itu ada bentuk lain untuk konten berisi icon yaitu ElevatedButton.icon seperti berikut.

ElevatedButton.icon(
 style: ElevatedButton.styleFrom(
  primary: Colors.red,
  shape: RoundedRectangleBorder(
   borderRadius:
   new BorderRadius.circular(12),
  ),
  padding: EdgeInsets.all(10.0),
 ),
 onPressed: () {
  getImage();
 },
 icon: Icon(
  Icons.camera_alt,
  color: Colors.white,
 ),
 label: Text(
  "Kamera",
  style: TextStyle(color: Colors.white),
 ),
),

Letak perbedaannya hanya pada icon dan label dimana ElevatedButton hanya menggunakan child.


Selamat mencoba :)