Flutter Tutorial : Cara menghilangkan shadow pada Elevated Button

Hello people spirit of learning!

Dalam flutter terdapat widget elevated button yang fungsinya adalah untuk membuat button dengan kustomisasi kita sendiri. Disini kita akan membuat button tanpa menggunakan shadow.

1. Membuat Elevated Button

ElevatedButton(onPressed: () {}, 
            child: Text('Confirm'))

Pertama, pastinya kita memanggil widget Elevated Button untuk membuat widget button nya. Nanti hasilnya akan seperti gambar diatas. Untuk isinya kita isi dengan text terlebih dahulu ya dan untuk properti OnPressed nya kita isi dengan function kosong.

2. Membuat Styling Button

ButtonStyle button = ElevatedButton.styleFrom(
  minimumSize: Size(130, 55),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  primary: Colors.red,
);

Kedua, untuk styling pada button kita membuatnya dengan file terpisah. Tipe data untuk syling button adalah ButtonStyle. dan di getter dengan stlyeFrom. ada banyak properti untuk styling pada button yaitu minimumSize, yang fungsinya membuat ukuran minimum pada button. Lalu shape yang fungsinya memodifikasi bentuk pada button. Primary adalah mengubah background warna pada button, Dan masih banyak lagi.

3. Implementasi Style ke dalam Elevated Button

ElevatedButton(
                style: button, onPressed: () {}, child: Text('Confirm'))

Yang ketiga, kita tinggal implementasikan style button pada elevated button. Caranya sangat mudah tinggal panggil properti style lalu isi dengan nama variable style yang baru saja kita buat.

4. Menghilangkan shadow pada elevated button

ButtonStyle button = ElevatedButton.styleFrom(
  minimumSize: Size(130, 55),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  elevation: 0,
  primary: Colors.red,
);

Pada Button, terdapat shadow sedikit di belakang buttonnya. Untuk menghilangkannya, gunakan properti elevation dan diisi dengan 0. fungsi dari properti elevation ialah menambahkan shadow sesuai dengan ukuran yang diisi.

Semoga bermanfaat dan terima kasih!