ss_bottom_navbar

ss_bottom_navbar is a Flutter package that provides a customizable bottom navigation bar. It allows you to easily add a bottom navigation bar to your app with various customization options.

Features

• Customizable bottom navigation bar
• Ability to add icons and labels to navigation items
• Ability to change the active and inactive icon color and label color
• Ability to add a background color to the navigation bar

Installation

Add ss_bottom_navbar to your pubspec.yaml file:

dependencies:
  ss_bottom_navbar: ^1.0.0

Then run:

flutter pub get

How to use

Basic usage

import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  final List<Widget> _children = [
    FirstPage(),
    SecondPage(),
    ThirdPage(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: SsBottomNavBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          SsBottomNavItem(icon: Icons.home, label: 'Home'),
          SsBottomNavItem(icon: Icons.search, label: 'Search'),
          SsBottomNavItem(icon: Icons.person, label: 'Profile'),
        ],
      ),
    );
  }
}

Customization

You can customize the bottom navigation bar by setting the properties of SsBottomNavBar:

SsBottomNavBar(
  currentIndex: _currentIndex,
  onTap: onTabTapped,
  backgroundColor: Colors.blue,
  activeIconColor: Colors.white,
  inactiveIconColor: Colors.grey,
  activeLabelColor: Colors.white,
  inactiveLabelColor: Colors.grey,
  items: [
    SsBottomNavItem(icon: Icons.home, label: 'Home'),
    SsBottomNavItem(icon: Icons.search, label: 'Search'),
    SsBottomNavItem(icon: Icons.person, label: 'Profile'),
  ],
)

• backgroundColor: Set the background color of the bottom navigation bar.
• activeIconColor: Set the color of the active icon.
• inactiveIconColor: Set the color of the inactive icon.
• activeLabelColor: Set the color of the active label.
• inactiveLabelColor: Set the color of the inactive label.

Credits

This package is heavily inspired by the BottomNavigationBar widget in Flutter.

Conclusion

ss_bottom_navbar is a great package to use for implementing a custom bottom navigation bar in your Flutter app. It has easy-to-use customization options and is a great alternative to the built-in BottomNavigationBar widget.