Flutter Widget : ElevatedButton

Pada artikel kali ini kita akan membahas salah satu widget yaitu elevatedbutton pada flutter dari bagaimana menggunakan widget ElevatedButton dan mengimplementasikan pada project flutter.

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