bottom_bar 1.3.0+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.3.0+1

Parameters

BottomBar

Creates a BottomBar that displays a list of BottomBarItem

• selectedIndex - Index of selected item
• backgroundColor - Background Color of BottomBar
• showActiveBackgroundColor - Shows the background color of BottomBarItem when it is active and when this is set to true
• curve - Curve of animation
• duration - Duration of animation
• height - Height of BottomBar
• 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
• inactiveIcon- Icon to display when BottomBarItem is not active
• 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