[Flutter] Basic Widget AppBar (Indonesia)

 [Flutter] Basic Widget AppBar (Indonesia)

Hallo semuanya pada kesempatan kali ini aku akan menjelaskan widget AppBar yang ada di Flutter.

Sebelum masuk ke materinya aku akan sedikit menjelaskan apa itu flutter, jadi Flutter adalah SDK untuk pengembangan aplikasi mobile yang dikembangkan oleh Google. Sama seperti react native, flutter ini dapat digunakan untuk membuat atau mengembangkan aplikasi mobile yang dapat berjalan pada device iOS dan Android.

Mungkin itu saja sedikit penjelasan tentang flutter, sekarang mari kita lansung aja masuk ke materinya cuss.

AppBar (Application Bar).

Apa itu AppBar? hmm..

Jadi buat yang belum tau, AppBar adalah bagian dari salah satu aplikasi mobile yang digunakan untuk menampilkan beberapa navigasi di header dari sebuah aplikasi.

Kalau di Flutter AppBar ini sebenarnya sebuah widget yang berasal dari material design, jadi kalo kita mau menggunakan widget AppBar ini kita harus import dulu package materialnya.

Untuk menggunakan package materialnya kita cukup gunakan saja widget MaterialApp, dan untuk menggunakan Appbar ini kita harus menggunakan widget utamanya yaitu scaffold, syntaxnya kurang lebih kaya gini :

flutter-widget-appbar

Dan tampilannya dari kode di atas adalah seperti ini :

flutter-widget-appbar

Sebenarnya di appbar kita ga hanya bisa nampilin title doang, tapi kita juga bisa nampilin kayak menu drawer dan icon search di appbar, caranya gimana?

Yaitu dengan menggunakan yang namanya leading dan actions, kalau contoh di atas itu tadi kita cuma masukin title doang di AppBarnya, sekarang kita bakal coba nambahin leading dan actionsnya cuss~ :

flutter-widget-appbar

Dan tampilan dari kode di atas adalah seperti ini :

flutter-widget-appbar

Untuk yang actions sebenarnya kita bisa masukin icon lebih dari satu karna dia bentuknya array, tapi untuk tutorial kali ini aku cuma mau masukin 1 aja karna sisanya aku pengen kalian aja yang coba-coba sendiri biar kalian bisa okey 😊.

Untuk penjelasan lebih lengkapnya teman- teman bisa langsung cek dokumentasi aslinya di web : https://api.flutter.dev/flutter/material/AppBar-class.html.

Okey semuanya mungkin segini aja untuk tutorial Flutter widget appbar kali ini semoga bermanfaat, bye bye semuanya 👋.

Related post