Membuat Bottom AppBar Keren di Flutter dengan Convex

Pada kesempatan kali ini kita akan membahas salah satu package keren untuk Flutter yaitu Convex_bottom_bar. Convex bottom bar merupakan package untuk membantu membuat bottom app bar yang keren dengan mudah. Sekeren apa tampilan dari bottom navigation yang menggunakan convex bottom bar ? Silahkan lihat gambar dibawah ini :
appbar flip
appbar react circle
appbar react

Cara Install

1. Buka file pubspec.yaml lalu tambahkan package convex_bottom_bar di bawah dependencies
dependencies:
  convex_bottom_bar: ^2.4.0
2. Apabila anda pengguna Visual Studio Code maka sesaat setalah mengimpan perubahan akan  menjalankan  perintah install, tetapi apabila tidak maka bisa menjalankan secara manual dengan perintah dibawah ini
flutter pub get

PENTING..!! Pada tutorial ini kami menggunakan flutter versi 1.20.1. Jika anda menggunakan versi  1.17.5 maka silahkan gunakan convex_bottom_bar versi 2.3.0. Untuk mengetahui versi flutter yang sedang digunakan jalanakan perintah “flutter –version” pada terminal

Cara Penggunaan Convex Bottom Bar

Sekarang saatnya memasang bottom appbar keren pada aplikasi flutter kita.

1. Import package

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

2. Pada bottomNavigationBar gunakan widget ConvexAppBar, kurang lebih codenya seperti dibawah ini

bottomNavigationBar: ConvexAppBar(
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.map, title: 'Discovery'),
    TabItem(icon: Icons.add, title: 'Add'),
    TabItem(icon: Icons.message, title: 'Message'),
    TabItem(icon: Icons.people, title: 'Profile'),
  ],
  initialActiveIndex: _selectedNavbar,
  onTap: _changeSelectedNavBar,
),

Penggunaannya Convex sangat mirip dengan BottomNavigationBar widget bawaan flutter. Bagi yang belum mengetahui penggunaan dari BottomNavigationBar, silahkan kunjungi link ini

Tampilan dari kode diatas kurang lebih akan menjadi seperti dibawah ini.

appbar keren di flutter

Tampilannya cukup kekinian bukan ? Bagi kami sih bottom app bar ini keren karena tampilannya yang menawan lain dari pada biasanya dan penggunaanya juga sangat mudah. Untuk kode lengkapnya dapat dilihat sebagai berikut berikut :

Kita juga dapat merubah warna background, mengatur ukuran icon dan lain-lain melalui pilihan atribute dibawah ini :

AttributesDeskripsi
backgroundColorMengganti warna background
gradientAttribute ini akan replace backgroundColor
heightAppBar height
colortab icon/text color
activeColortab icon/text color pada saat aktif
curveSizesize of the convex shape
toptop edge of the convex shape relative to AppBar
cornerRadiusDraw the background with topLeft and topRight corner; Only work work with fixed style
stylestyle to describe the convex shape: fixed, fixedCircle, react, reactCircle, …
chipBuildercustom badge builder, use ConvexAppBar.badge for default badge
Default image
Omadi Jaya
Fullstack developer, Software Engineer @ Depok, Indonesia

Leave a Reply