bottom_bar 1.2.2+1

Bottom bar helps create an optimized bottom navigation bar with beautiful animations

Bottom Bar

Bottom bar helps create an optimized bottom navigation bar with beautiful animations. This package is inspired by bottom_navy_bar and has many improvements over it:

• BottomBarItem's width is dynamic and not fixed (Bottom_bar vs bottom_navy_bar)
• Dark Mode Support
• More optimized (BottomBarItem vs BottomNavyBarItem)
• Allows inserting keys for each BottomBarItem for widget testing

Content

• Installation
• Parameters
• Take Note
• Community Support

Installation

Add bottom_bar to pubspec.yaml

dependencies:
  bottom_bar: ^1.2.2+1

Parameters

BottomBar

Creates a BottomBar that displays a list of BottomBarItem

• selectedIndex - Index of selected item
• curve - Curve of animation
• duration - Duration of animation
• items - List of BottomBarItem to display
• itemPadding - Padding between the background color and (Row that contains icon and title)
• onTap - Fires whenever a BottomBarItem is tapped
• textStyle - TextStyle of title widget (Only applied when widget is Text)

BottomBarItem

Contains information about the item that BottomBar has to display

• icon - Icon of BottomBarItem
• title - Title of BottomBarItem
• activeColor - Color of icon, title, and background of BottomBarItem during light mode when it is selected
• darkActiveColor - Color of icon, title, and background of BottomBarItem during dark mode when it is selected
• inactiveColor - Color of icon, title, and background of BottomBarItem when it is not selected

Usage

Import the Package

import 'package:bottom_bar/bottom_bar.dart';

Example

  int _currentPage = 0;
  final _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: [
          Container(color: Colors.blue),
          Container(color: Colors.red),
          Container(color: Colors.greenAccent.shade700),
          Container(color: Colors.orange),
        ],
        onPageChanged: (index) {
          // Use a better state management solution
          // setState is used for simplicity
          setState(() => _currentPage = index);
        },
      ),
      bottomNavigationBar: BottomBar(
        selectedIndex: _currentPage,
        onTap: (int index) {
          _pageController.jumpToPage(index);
          setState(() => _currentPage = index);
        },
        items: <BottomBarItem>[
          BottomBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            activeColor: Colors.blue,
          ),
          BottomBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favorites'),
            activeColor: Colors.red,
            darkActiveColor: Colors.red.shade400, // Optional
          ),
          BottomBarItem(
            icon: Icon(Icons.person),
            title: Text('Account'),
            activeColor: Colors.greenAccent.shade700,
            darkActiveColor: Colors.greenAccent.shade400, // Optional
          ),
          BottomBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
            activeColor: Colors.orange,
          ),
        ],
      ),
    );
  }

Community Support

If you have any suggestions or issues, feel free to open an issue

If you would like to contribute, feel free to create a PR