6 Tipe Button Populer Flutter

Button atau tombol merupakan alat navigasi untuk melakukan suatu perintah dalam program aplikasi. Pada framework Flutter sendiri, ada beberapa jenis button yang akan kita bahas lebih lanjut.

Perkenalan Framework Flutter

Flutter adalah salah satu framework yang digunakan untuk membantu developer dalam membuat aplikasi mobile multiplatform.

Flutter sendiri memiliki beberapa button pendukung yang sering digunakan. Berikut adalah contoh-contoh button dalam Flutter:

FlatButton

TextButton ini adalah pembaruan dari FlatButton yang menghasilkan tampilan yang sama. TextButton ini mampu melakukan navigasi ke page yang lain atau navigasi apapun. Berikut adalah contoh penerapan TextButton dalam bentuk coding.

TextButton(
						onPressed: () {},
						child: Text(
								"Let's take a picture",
						),
					),

RaisedButton

ElevatedButton ini merupakan pembaruan dari RaisedButton. Yang membedakan ElevatedButton dengan RaisedButton adalah background dari button, warna dari teks dan parameter yang dihasilkan.

FloatingButton

FloatingButton merupakan icon mengambang berbentuk lingkaran yang digunakan untuk melakukan action atau menambahkan sesuatu pada halaman aplikasi.

Drop Down Button

Drop-down merupakan sebuah button widget pada Flutter yang memungkinkan pengguna dapat memilih satu nilai dari daftar. Ketika daftar drop-down tidak aktif, daftar menu hanya menampilkan satu nilai. Ketika diaktifkan, menu menampilkan daftar nilai, yang dimana pengguna dapat memilih salah satu dari daftar yang tersedia.

Icon Button

IconButton adalah tombol yang disisipi icon sehingga menjadi Widget Icon yang bisa diklik.

Popup Menu Button

Menampilkan menu saat ditekan dan memanggil dipilih saat menu ditutup karena item dipilih. Nilai yang diteruskan ke onSelected adalah nilai item menu yang dipilih. Jika kita fokus pada aplikasi, kita bisa melihat di setiap aplikasi ada tombol Menu Pop Up yang akan melakukan beberapa pekerjaan.

Cara Menggunakan Flutter

Sebelum belajar membuat aplikasi menggunakan Flutter, persiapkan dulu setup plugin yang diperlukan, seperti:

• Instalasi framework Flutter
• Install Plugin Flutter & Dart
• Setup di Visual Studio Code

Instalasi framework Flutter

Langkah pertama ialah download file Flutter terlebih dahulu, menyesuaikan dengan sistem OS masing-masing. Kemudian pilih file zip seperti di bawah ini untuk mendownload file.

Install Plugin Flutter & Dart

Selanjutnya, buka aplikasi Visual Studio Code. Kemudian, klik menu Extensions yang terdapat pada sidebar aplikasi untuk proses mendownload plugin Flutter dan Dart.

Setup di Visual Studio Code

Lakukan setup di Visual Studio Code agar Flutter dapat dijalankan. Langkah setup yang dilakukan, meliputi :

1. Menggunakan Flutter pada channel stable
2. Melakukan upgrade Flutter ke versi terbaru
3. Memastikan browser dengan versi terbaru

Flutter is a framework that is now widely used

Pernah dengar istilah “teori tanpa praktek adalah lumpuh praktek tanpa teori adalah buta”? Jangan sampai seperti itu ya, people!

Yuk implementasikan hasil teorimu dengan belajar lebih lanjut untuk membuat project sederhana menggunakan framework Flutter dan bangun portfoliomu!

BuildWith Angga.