Cara Install
dependencies:
convex_bottom_bar: ^2.4.0flutter pub getPENTING..!! 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.
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 :
| Attributes | Deskripsi |
|---|---|
| backgroundColor | Mengganti warna background |
| gradient | Attribute ini akan replace backgroundColor |
| height | AppBar height |
| color | tab icon/text color |
| activeColor | tab icon/text color pada saat aktif |
| curveSize | size of the convex shape |
| top | top edge of the convex shape relative to AppBar |
| cornerRadius | Draw the background with topLeft and topRight corner; Only work work with fixed style |
| style | style to describe the convex shape: fixed, fixedCircle, react, reactCircle, … |
| chipBuilder | custom badge builder, use ConvexAppBar.badge for default badge |
https://appbar.codemagic.app/
