Halo teman-teman
Pada artikel kali ini kita akan memcoba membuat bubbule bootm bar di flutter menggunakan package bubble_bottom_bar.
Cara membuat bubble bottom bar :
- Buat Project baru dengan nama bubble_buttom
- Tambahkan package bubble_bottom_bar di pubspec.yaml
jalankan pub get jika dibutuhkan
$ flutter pub get
- Import package bubble_bottom_bar
- Gunakan BubbleBottomBar widget pada properti bottomNavigationBar yang terdapat di Scaffold widget.
currentIndex berguna untuk menentukan posisi navigasi yang sedang aktif. Agar nilai tersebut dapat berubah saat di tap maka kita harus menggunakan statefull widget dan membuat fungsi untuk mengupdate state. Contoh penggunaan lengkapnya seperti dibawah ini
main.dart
import 'package:flutter/material.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
import 'screen.dart';
void main() {
runApp(MaterialApp(
home: HomePage(),
));
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int? currentIndex;
@override
void initState() {
super.initState();
currentIndex = 0;
}
void changePage(int? index) {
setState(() {
currentIndex = index;
});
}
Widget _getWidget() {
if (currentIndex == 1) {
return RiwayatScreen();
} else if (currentIndex == 2) {
return FolderScreen();
} else if (currentIndex == 3) {
return GalleryScreen();
}
return HomeScreen();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Belajar Bottom Navigasi'),
),
body: _getWidget(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Colors.red,
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: BubbleBottomBar(
hasNotch: true,
fabLocation: BubbleBottomBarFabLocation.end,
opacity: .2,
currentIndex: currentIndex,
onTap: changePage,
borderRadius: BorderRadius.vertical(
top: Radius.circular(16),
), //border radius doesn't work when the notch is enabled.
elevation: 8,
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(
Icons.dashboard,
color: Colors.black,
),
activeIcon: Icon(
Icons.dashboard,
color: Colors.red,
),
title: Text("Home")),
BubbleBottomBarItem(
backgroundColor: Colors.deepPurple,
icon: Icon(
Icons.access_time,
color: Colors.black,
),
activeIcon: Icon(
Icons.access_time,
color: Colors.deepPurple,
),
title: Text("Riwayat")),
BubbleBottomBarItem(
backgroundColor: Colors.orange,
icon: Icon(
Icons.folder_open,
color: Colors.black,
),
activeIcon: Icon(
Icons.folder_open,
color: Colors.orange,
),
title: Text("Folders")),
BubbleBottomBarItem(
backgroundColor: Colors.green,
icon: Icon(
Icons.image,
color: Colors.black,
),
activeIcon: Icon(
Icons.image,
color: Colors.green,
),
title: Text("Gallery"))
],
),
);
}
}
Untuk screen-nya, disini kita pisahkan pada file yang bernama screen.dart
screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Container(
alignment: Alignment.center,
color: Colors.red[100],
child: Text('Home Screen'),
),
);
}
}
class RiwayatScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Container(
alignment: Alignment.center,
color: Colors.deepPurple[100],
child: Text('Riwayat Screen'),
),
);
}
}
class FolderScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Container(
alignment: Alignment.center,
color: Colors.orange,
child: Text('Folders Screen'),
),
);
}
}
class GalleryScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Container(
alignment: Alignment.center,
color: Colors.green[200],
child: Text('Gallery Screen'),
),
);
}
}
berikut ini tampilannya:
sekian artikel untuk kali ini, sampai jumpa di artikel selanjutnya, selamat mencoba..