Custom Bottom Navigation Bar

A customizable bottom navigation bar widget for Flutter with animated transitions between navigation items.

Custom Bottom Navigation Bar Demo

Installation

Add the following to your pubspec.yaml file:

dependencies:
  custom_bottom_nav: ^1.0.0

Usage

Import the package in your Dart code:

import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_bar.dart';

Use CustomBottomNavigationBar and CustomNavItem widgets in your app: Please don't forget to extend TickerProviderStateMixin in your

It helps you to add animation to your navigation bar

HomePage state class.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>  with TickerProviderStateMixin{
  int _currentIndex = 0;

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: Text(
          'Current Page: $_currentIndex',
          style: TextStyle(fontSize: 24),
        ),
      ),
      bottomNavigationBar: CustomBottomNavigationBar(
        currentIndex: _currentIndex,
        onTabTapped: onTabTapped,
        items: [
          CustomNavItem(icon: Icons.home, label: "Home"),
          CustomNavItem(icon: Icons.search, label: "Search"),
          CustomNavItem(icon: Icons.person, label: "Profile"),
          CustomNavItem(icon: Icons.settings, label: "Settings"),
          CustomNavItem(icon: Icons.more_horiz, label: "More"),
        ],
         
        vsync: this,
      ),
    );
  }
}

Customization Options

  • Animation Types: Choose from slide, fade, or scale animations for navigation items.
  • Icon and Label Styling: Customize the appearance of icons and labels based on selected and unselected states.
  • Navigation Callback: Implement a callback function to handle navigation item taps.

Examples

Slide Animation

CustomBottomNavigationBar(
  currentIndex: _currentIndex,
  onTabTapped: onTabTapped,
  items: [
    CustomNavItem(icon: Icons.home, label: "Home"),
    CustomNavItem(icon: Icons.search, label: "Search"),
    CustomNavItem(icon: Icons.person, label: "Profile"),
    CustomNavItem(icon: Icons.settings, label: "Settings"),
    CustomNavItem(icon: Icons.more_horiz, label: "More"),
  ],
)

Fade Animation

CustomBottomNavigationBar(
  currentIndex: _currentIndex,
  onTabTapped: onTabTapped,
  items: [
    CustomNavItem(icon: Icons.home, label: "Home"),
    CustomNavItem(icon: Icons.search, label: "Search"),
    CustomNavItem(icon: Icons.person, label: "Profile"),
    CustomNavItem(icon: Icons.settings, label: "Settings"),
    CustomNavItem(icon: Icons.more_horiz, label: "More"),
  ],
  animType: AnimationType.fade,
)

Scale Animation

 CustomBottomNavigationBar(
  currentIndex: _currentIndex,
  onTabTapped: onTabTapped,
  items: [
    CustomNavItem(icon: Icons.home, label: "Home"),
    CustomNavItem(icon: Icons.search, label: "Search"),
    CustomNavItem(icon: Icons.person, label: "Profile"),
    CustomNavItem(icon: Icons.settings, label: "Settings"),
    CustomNavItem(icon: Icons.more_horiz, label: "More"),
  ],
  animType: AnimationType.scale,
)

Author

License

This project is licensed under the MIT License. See the LICENSE file for details.

Libraries

custom_bottom_navigation_bar
example/main