custom_bubble_bottom_bar 1.0.0
custom_bubble_bottom_bar: ^1.0.0 copied to clipboard
A customizable bubble bottom navigation bar for Flutter apps.
example/main.dart
import 'package:custom_bubble_bottom_bar/custom_bubble_bottom_bar.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const ExampleApp());
}
class ExampleApp extends StatefulWidget {
const ExampleApp({super.key});
@override
State<ExampleApp> createState() => _ExampleAppState();
}
class _ExampleAppState extends State<ExampleApp> {
int _selectedIndex = 0;
final _pages = const [
Center(child: Text('🏠 Home Page')),
Center(child: Text('📅 Calendar Page')),
Center(child: Text('🎯 Target Page')),
Center(child: Text('🧰 Tools Page')),
Center(child: Text('👤 Profile Page')),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[100],
body: _pages[_selectedIndex],
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(12.0),
child: BubbleBottomBar(
items: const [
BubbleBottomBarItem(icon: Icons.home, label: 'Home'),
BubbleBottomBarItem(icon: Icons.calendar_today, label: 'Calendar'),
BubbleBottomBarItem(icon: Icons.track_changes, label: 'Target'),
BubbleBottomBarItem(icon: Icons.build, label: 'Tools'),
BubbleBottomBarItem(icon: Icons.person, label: 'Profile'),
],
currentIndex: _selectedIndex,
onTap: (i) => setState(() => _selectedIndex = i),
),
),
),
);
}
}