Pada artikel kali ini kita akan membahas salah satu widget yaitu elevatedbutton pada flutter dari bagaimana menggunakan widget ElevatedButton dan mengimplementasikan pada project flutter.
Daftar Isi
Menggunakan ElevatedButton
Kita dapat membuat widget menggunakan elevatedbutton dengan memanggil konstrukturnya :
const ElevatedButton({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
@required Widget child,
})
Ada dua parameter yang dibutuhkan, tentu saja kita harus memberikan widget sebagai child yang biasanya teks atau icon. Kita juga diharuskan untuk meneruskan callback onPressed yang dipanggil saat pengguna (user) menekan tombolnya.
Penggunaan Dasar
Selanjutnya kita akan mencoba membuat contoh sederhana menggunakan elevatedbutton pada project flutter:
pada penggunaan dasar kali ini kita hanya meneruskan parameter yang diperlukan, pada kasus ini hanya menampilkan kalimat pada console
ElevatedButton(
onPressed: () {
print('ini done');
},
child: new Text('belajarflutter.com'),
),
Output

ElevatedButton.Icon
selain itu elevatedbutton bisa kita tambahkan dengan icon menggunakan elevatedbutton.icon.
ElevatedButton.icon(
label: Text(
'belajaraflutter.com',
),
icon: Icon(Icons.web),
style: ElevatedButton.styleFrom(
primary: Colors.purple,
),
onPressed: () {
print('yang kedua');
},
)
Output

ElevatedButton LongPress
kita juga bisa menggunakan parameter longpress kali ini kita akan mencoba menggunakan onPressed dan onLongPress
ElevatedButton(
child: Text('belajarflutter.com'),
onPressed: () {
print('menggunakan onPressed');
},
onLongPress: (){
print('Menggunakan LongPress klik yang lama button ');
},
),
Output :

saat menggunakan onLongPress kita harus menahan saat kita ingin klik button, sehingga outputnya seperti di atas.
Source Code Lengkap :
https://github.com/belajarflutter-com/elevatedbuttonwidget
Sumber:
https://api.flutter.dev/flutter/material/ElevatedButton-class.html