Button atau yang lebih familiar kita kenal sebagai 'tombol' ini nyatanya dalam Flutter ada macamnya. Malam ini kita akan belajar sedikit tentang berbagai jenis button dalam kaitannya Widget Flutter. Untuk pembuatannya tidaklah rumit, bisa cek kembali artikel << disini >> untuk step by step membuat tombol dalam Flutter.
Sudah paham kan !? Nah lanjut ke jenis-jenis tombol button ya....
Kita akan berTa'aruf dengan 6 jenis dulu, selain itu akan kita kenalkan di postingan yang akan datang CMIIW 😗
- Flutter FloatingActionButton
Tombol aksi merupakan tombol yang mengambang melingkar yang mengarahkan kursor ke konten untuk mempromosikan tindakan utama dalam aplikasi. Biasanya digunakan tombol aksi mengambang di bidang Scaffold.floatingActionButton. Posisi default akan berada di pojok kanan bawah layar.
floatingActionButton: FloatingActionButton(
child: Icon(Icons.save),
backgroundColor: Colors.deepPurple,
foregroundColor: Colors.white,
onPressed: () {
setState(() {
});
- Flutter ElevatedButton
Merupakan tombol yang ditinggikan / memiliki elevasi. Elevasinya meningkat saat tombol ditekan. Kita dapat menata widget Teks dan Ikon label menggunakan properti gaya dari masing-masing widget. Hindari menggunakan tombol yang memiliki elevasi pada konten yang sudah ditinggikan / memiliki elevasi seperti dialog atau kartu.
body: Container(
width:double.infinity ,
padding: EdgeInsets.all(20),
alignment: Alignment.topCenter,
child:ElevatedButton(
child: Text("Button"),
onPressed:() {
},
)
),
- Flutter TextButton
Widget TextButton untuk menampilkan tombol sederhana dengan elevasi nol. Tombol dengan gaya tulisan ini bereaksi terhadap sentuhan.
body: Container(
width:double.infinity ,
padding: EdgeInsets.all(20),
alignment: Alignment.topCenter,
child:TextButton(
child: Text("Button"),
onPressed:() {
},
)
),
- Flutter OutlineButton
Dalam flutter, kita akan menggunakan OutlineButton untuk menampilkan tombol sederhana. Ini tidak lain adalah FlatButton dengan batas garis. OutlineButton adalah garis tombol yang ditampilkan pada widget Material (elevasi nol).
body: Container(
width:double.infinity ,
padding: EdgeInsets.all(20),
alignment: Alignment.topCenter,
child:OutlineButton(
child:Text("Button"),
onPressed: () {},
)
),
- Flutter RaisedButton
Flutter RaisedButton adalah widget material. Ini memiliki elevasi yang merupakan properti material. Secara default, nilai elevasi untuk RaisedButton adalah 2.
body: Container(
width:double.infinity ,
padding: EdgeInsets.all(20),
alignment: Alignment.topCenter,
child:RaisedButton(
child:Text("Button"),
onPressed: () {},
)
),
- Flutter FlatButton
Widget FlatButton digunakan untuk menampilkan tombol sederhana. FlatButton hanyalah tombol teks, karena tidak memiliki style dan border. Tidak memiliki elevasi, warna tombol dan warna teks seperti tombol terangkat. Warna teksnya hitam tanpa latar belakang secara default.
Source code singkatnya untuk membuat tombol ini adalah :
body: Container(
width:double.infinity ,
padding: EdgeInsets.all(20),
alignment: Alignment.topCenter,
child:FlatButton(
child:Text("Button"),
onPressed: () {
},
)
),Nah, cukup sekian tentang ta'aruf dengan jenis-jenis button. Bertemu lagi di lain kesempatan :)#WajibNgulik 👀😉🔗>> Button Flutter 2
