Memanfaatkan Flexible AppBar pada Flutter

Selamat Siang, Semoga kita terlindungi dari virus corona 😷
Setelah kemarin kita membuat tampilan Login beserta Request API nya klik disini 👇. Hari ini kita akan membuat mainmenu . mainmenu adalah tampilan utama yang menjadi pusat aplikasi. Pada kali ini kita akan membuat mainmenu yang mana AppBarnya bisa Flexible sehingga jangkauan user saat melihat content dari mainmenu aplikasi menjadi luas.

Dalam pembuatan mainmenu kali ini, stuktur dari UI nya terdiri dari appBar yang bisa flexible dan content berupa list data. Pertama kita buat terlebih dahulu appBar default, dimana appBar default ini posisi dan isinya constant walaupun terjadi scroll pada content.

appBar default ini menampilkan 3 widget yang posisinya horizontal. kita memanfaatkan MainAxisAligment.spaceBetween. Dengan menggunakan MainAxisAligment. spaceBetween ini widget1 berada di paling kiri (left), widget2 berada tepat center vertical (center) dan widget3 berada di paling kanan (right)

Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
widget1, widget2, widget3
],
),
);

link full code : https://github.com/ioacode/MaybeHelp/blob/master/plantAppBarController.dart

Kemudian setelah itu kita buat Flexible AppBar. Flexible AppBar adalah bar yang flexible saat user melakukan scrolling up down. sehingga ukuran heigh dari appBar menjadi static dan berubah saat user melakukan scrolling up down.

Pertama kita harus menetapkan min height dari appBar ini, min height ini digunakan untuk memberi tinggi constant untuk menampilkan default appBar yang telah dibuat diatas sata scrolling up dilakukan.

final double appBarHeight : 66.0

final double statusBarHeight : MediaQuery.of(context).padding.top

height: statusBarHeight + appBarHeight

Kemudian beri warna background dari flexible AppBar ini :

final double appBarHeight : 66.0

final double statusBarHeight : MediaQuery.of(context).padding.top

height: statusBarHeight + appBarHeight

Kemudian membuat content dari flexible AppBar. jika content berisi data struktur kebawah , anda dapat memanfaatkan Column dengan MainAxisAligment.end , agar anda menghitungnya dari content terakhir dan tidak ada content yang tidak terlewatkan .

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.end,

children: <Widget>[

widget1, widget2, dll .... //input widget

]

)

link full code : https://github.com/ioacode/MaybeHelp/blob/master/plantFexibleAppBarController.dart

kemudian kita membuat class planController. class yang digunakan untuk menjalankan pembuatan appBar ini.

SliverAppBar : component ini berfungsi untuk mengatur componen dari appBar, seperti
- automaticallyImplyLeading : digunakan untuk memberi button back automatic
- pinned : digunakan untuk membuat appBardefault menghilang atau tidak saat proses scroling up
- expandedHeight : digunakan untuk memberi max height dari flexible appBar

SilverList :
- component ini berupa list. tetapi content dari list nya bisa anda modif berdasarkan keinginan anda. Seperti berikut saya menampilkan widget berupa column list.

return Scaffold(
body: CustomScrollView(slivers: <Widget>[
SliverAppBar(
automaticallyImplyLeading: false,
title: plantAppBarController(),
pinned: true,
expandedHeight: 210.0,
flexibleSpace: FlexibleSpaceBar(
background: plantFexibleAppBarController(this.plantCountry),
),
),
SliverList(delegate: SliverChildListDelegate(
listDetail(plantCountry)
)
)
])
);

link full code : https://github.com/ioacode/MaybeHelp/blob/master/planController.dart