Halo sobatIna gimana kabarnya hari ini, stay strong kan, nah disini kita akan bahas materi tentang  widget Appbar. Widet Appbar ini berada di bagian atas layar, biasanya berisi judul tentang screen tersebut, drawer, menu home, dll. Widget Appbar nihh diibaratkan seperti kop surat ya teman-teman. Seperti biasa tanpa basa basi kita Gass praktek!!!

Berikut Code sederhana penggunaan widget Appbar

AppBar( title: Text('Contoh Appbar'), centerTitle: true, actions: [ IconButton( icon: Icon(Icons.search), onPressed: () { // Aksi yang dilakukan saat tombol pencarian ditekan }, ), IconButton( icon: Icon(Icons.more_vert), onPressed: () { // Aksi yang dilakukan saat tombol lebih banyak ditekan }, ), ], ), Salin

Dan ini hasilnya

Pada bagian ini, AppBar didefinisikan dengan judul 'Contoh Appbar' yang ditempatkan di tengah (centerTitle: true). Di sisi kanan AppBar, ada dua ikon tombol yang masing-masing mewakili tombol pencarian dan tombol lebih banyak. Saat salah satu dari tombol ini ditekan, Anda dapat menetapkan aksi khusus yang ingin diambil, misalnya, membuka kotak pencarian atau menampilkan menu pilihan lebih banyak. Keseluruhan struktur ini ditempatkan di dalam widget Scaffold, yang biasanya digunakan sebagai kerangka kerja dasar dalam pengembangan aplikasi Flutter.

Okk teman-teman diatas contoh simle penggunaan Appbar, sekarang kita bahas properti apa saja yang ada di Appbar, So lets praktek

1. Title

title: Text('Hello, World'), Salin

Dan ini hasilnya

Pada bagian ini, AppBar didefinisikan dengan judul 'Helloworld'. Text('Helloworld') adalah widget yang menampilkan teks 'Helloworld' di dalam AppBar. Struktur ini juga ditempatkan di dalam widget Scaffold, yang umumnya digunakan sebagai kerangka kerja dasar untuk merancang antarmuka pengguna pada aplikasi Flutter.

kamu bisa meletakkan judul tersebut ke tengah dengan argument centertitle seperti berikut

appBar: AppBar( title: Text('Hello, World'), centerTitle: true, ), Salin

Dan ini hasilnya

Pada bagian ini, AppBar didefinisikan dengan judul 'Helloworld' dan properti centerTitle diatur sebagai true. Dengan mengatur centerTitle ke true, judul AppBar akan ditempatkan di tengah daripada di sisi kiri secara default. Pengaturan ini memberikan tampilan yang estetis dengan judul yang terletak di tengah AppBar.

2. Leading

Di leading kita bisa banyak menggunakan widget namun disini saya menggunakan widget icon, seperti berikut

appBar: AppBar( title: Text('Hello, World'), centerTitle: true, leading: IconButton( onPressed: () {}, icon: Icon(Icons.home), ), ), Salin

Dan ini hasilnya

Pada bagian ini, leading ditetapkan sebagai sebuah IconButton dengan ikon rumah (Icons.home). Saat tombol di sisi kiri AppBar ini ditekan, fungsi onPressed akan dijalankan. Saat ini, fungsi tersebut masih kosong dan perlu diimplementasikan sesuai dengan aksi yang diinginkan, misalnya, navigasi kembali ke beranda atau menampilkan menu navigasi.

3. actions

pada widget actions sama seperti widget leading dia bisa banyak menampung widget lain, disini saya mencontohkan menggunakan widget icon lagi, seperti berikut

appBar: AppBar( title: Text('Hello, World'), centerTitle: true, leading: IconButton( onPressed: () {}, icon: Icon(Icons.home), ), actions: [ IconButton( onPressed: () {}, icon: Icon(Icons.search), ), ], ), Salin

Dan ini hasilnya

Pada bagian ini, leading dan actions berisi IconButton yang dapat dikustomisasi sesuai kebutuhan. Saat salah satu dari tombol ini ditekan, fungsi onPressed akan dijalankan. Fungsi tersebut masih kosong dan perlu diimplementasikan sesuai dengan aksi yang diinginkan, misalnya, navigasi kembali ke beranda atau menampilkan kotak pencarian.

4. backgroundColor

appBar: AppBar( title: Text('Hello, World'), centerTitle: true, leading: IconButton( onPressed: () {}, icon: Icon(Icons.home), ), actions: [ IconButton( onPressed: () {}, icon: Icon(Icons.search), ), ], backgroundColor: Colors.green, ), Salin

Dan ini hasilnya

Pada bagian ini, backgroundColor digunakan untuk mengubah warna latar belakang AppBar menjadi hijau (Colors.green). Anda dapat mengganti nilai warna sesuai dengan preferensi desain Anda.

5. bottom

Di Flutter, bottom property pada AppBar digunakan untuk menambahkan widget di bagian bawah dari AppBar. Properti ini memungkinkan Anda menempatkan widget apa pun di bawah judul atau ikon di AppBar.

appBar: AppBar( title: Text('Hello, World'), centerTitle: true, leading: IconButton( onPressed: () {}, icon: Icon(Icons.home), ), actions: [ IconButton( onPressed: () {}, icon: Icon(Icons.search), ), ], backgroundColor: Colors.green, bottom: PreferredSize( preferredSize: Size.fromHeight(48.0), child: Container( alignment: Alignment.center, color: Colors.blue, child: Text( 'Bottom Widget', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), ), Salin

Dan ini hasilnya

6. actionsIconTheme

actionsIconTheme adalah properti pada widget AppBar di Flutter yang memungkinkan Anda menentukan tema untuk ikon-ikon yang berada di dalam properti actions. Dengan actionsIconTheme, Anda dapat mengontrol aspek seperti warna, ukuran, dan opsi pemanggilan lainnya yang berkaitan dengan ikon-ikon tersebut. Berikut contoh penggunaan

AppBar( title: Text('Hello, World'), centerTitle: true, leading: IconButton( onPressed: () {}, icon: Icon(Icons.home), ), actions: [ IconButton( onPressed: () {}, icon: Icon(Icons.search), ), ], backgroundColor: Colors.green, bottom: PreferredSize( preferredSize: Size.fromHeight(48.0), child: Container( alignment: Alignment.center, color: Colors.blue, child: Text( 'Bottom Widget', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), actionsIconTheme: IconThemeData( color: Colors.deepOrange, ), ), Salin

Dan ini hasilnya

Pada bagian ini, actionsIconTheme digunakan untuk mengubah tema ikon dari aksi yang ada di sisi kanan AppBar. Warna ikon pada daftar aksi diubah menjadi oranye dalam contoh ini (Colors.deepOrange), namun Anda dapat menyesuaikan nilai-nilai tersebut sesuai dengan preferensi desain aplikasi Anda.

Sampai disini dulu ya pembahasan kita kali ini, sampai jumpa dan

SELAMAT BELAJAR!!