Hallo sobat flutter, pada artikel ini saya akan membahas tentang widget Button. Button atau yang biasa dikenal dengan tombol merupakan navigasi untuk melakukan suatu perintah. Button pada flutter dikenal dengan widget Button nih sob, ada beberapa jenis Button pada flutter, yaitu : TextButton, ElevatedButton, OutlinedButton, FloatingActionButton, IconButton, dll. Disini saya hanya akan mencontohkan ketiga button saja.

Silahkan kalian membuat projek baru. Disini saya menggunakan visual studio code. Kalian bebas memberi nama projek nya apa, disini saya menamai projeknya dengan nama tombol.

TextButton

TextButton(

               onPressed: () {},

               child: Text(

                 “Text Button”,

                 style: TextStyle(

                     fontSize: 20,

                     fontWeight: FontWeight.bold,

                     ),

               )),

Ini penggunaan TextButton, disini saya tidak mengisi onPressed-nya karena saya tidak melakukan navigasi pada Button tersebut. TextButton ini adalah pembaruan dari FlatButton yang dimana akan menghasilkan tampilan yang sama. Ini merupakan tampilan dari TextButton, widget ini terlihat hanya seperti teks biasa tetapi jika dibandingkan dengan widget Text adalah TextButton ini bisa melakukan navigasi ke page yang lain atau navigasi apapun sedangkan widget Text hanya menampilkan teks saja.

ElevatedButton

ElevatedButton(

               onPressed: () {},

               child: Text(

                 “Elevated Button”,

                 style: TextStyle(

                     fontSize: 20,

                     color: Colors.white,

                     fontWeight: FontWeight.bold),

               ))

Ini penggunan dari ElevatedButton, button ini juga merupakan pembaruan dari RaisedButton, yang membedakan ElevatedButton dengan RaisedButton adalah background dari button, warna dari teks dan parameter yang dihasilkan. Ini merupakan tampilan dari ElevatedButton. Nah sob terlihatkan perbedaan antara TextButton dengan ElevatedButton.

OutlinedButton

OutlinedButton(

               onPressed: () {},

               child: Text(

                 “Outlined Button”,

                 style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),

               ))

Ini penggunaan dari OutlinedButton. Button ini juga merupakan pembaruan dari OutlineButton, yang membedakan dengan OutlinedButton adalah warna dari teks dan parameter yang dihasilkan. Ini merupakan tampilan dari OutlinedButton. Terlihat perbedaan dari beberapa button sebelumnya, OutlineButton memiliki border yang tipis disekelilingnya.

Kesimpulan

Dengan button kita bisa memberikan navigasi ke berbagai macam page atau menghasilkan suatu data dengan button tersebut. Fungsi dari ketiga button tersebut itu sama, jadi tergantung dari sobat semua ingin menggunakan widget button yang mana, dan yang sesuai dengan kebutuhan.