custom_bubble_bottom_bar 1.0.0 copy "custom_bubble_bottom_bar: ^1.0.0" to clipboard
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),
          ),
        ),
      ),
    );
  }
}
3
likes
150
points
15
downloads

Publisher

verified publisherronak-vasoliya.devservers.site

Weekly Downloads

A customizable bubble bottom navigation bar for Flutter apps.

Homepage

Documentation

API reference

License

MIT (license)

Dependencies

cupertino_icons, flutter

More

Packages that depend on custom_bubble_bottom_bar