Bottom Navbar With Custom Indicator

bottom_navbar_with_indicator is a Flutter package for a fully customizable bottom navigation bar with line indicators and gradient. ✨

It allows custom bottom bar with any Custom Widget (Stateless or Stateful).

Very smooth animations supporting Android, iOS & WebApp, DesktopApp.

Show Cases

alert2 alert2

Why?

We build this package because we wanted to:

  • have a complete customizable bottom bar with indicators
  • be able to add gradient color
  • set indicator options for top and bottom.
  • pass dynamic icon with label
  • choose our own style like IconSize, FontSize, selectedColor,unSelectedColor, splashColor & call back function (onTap).

❗UpComing Features❗

  • Will provide fully support with assets image (svg, png) and material icons with new update.

Installation

Create a new project with the command

flutter create MyApp

Add

bottom_navbar_with_indicator: ...

to your pubspec.yaml of your flutter project. OR run

flutter pub add bottom_navbar_with_indicator

in your project's root directory.

In your library add the following import:

import 'package:bottom_navbar_with_indicator/bottom_navbar_with_indicator.dart';

For help getting started with Flutter, view the online documentation.

Usage

Usage without gradient:

            class MyExample extends StatefulWidget {
            @override
            _MyExampleState createState() => _MyExampleState();
            }

            class _MyExampleState extends State<MyExample> {
            int _selectedIndex = 0; //default index

            List<Widget> _widgetOptions = [
                Text('Home'),
                Text('Account'),
                Text('Leaves'),
                Text('Loyalty'),
                Text('Requests'),
            ];
            @override
            Widget build(BuildContext context) {
                return Scaffold(
                appBar: AppBar(
                    title: Text('Example'),
                ),
                body: Center(
                    child: _widgetOptions.elementAt(_selectedIndex),
                ),
                bottomNavigationBar: CustomLineIndicatorBottomNavbar(
                    selectedColor: Colors.blue,
                    unSelectedColor: Colors.black54,
                    backgroundColor: Colors.white,
                    currentIndex: _selectedIndex,
                    onTap: (index) {
                    setState(() {
                        _selectedIndex = index;
                    });
                    },
                    enableLineIndicator: true,
                    lineIndicatorWidth: 3,
                    indicatorType: IndicatorType.Top,
                    // gradient: LinearGradient(
                    //   colors: kGradients,
                    // ),

                    customBottomBarItems: [
                    CustomBottomBarItems(
                        label: 'Home',
                        icon: Icons.home,
                    ),
                    CustomBottomBarItems(
                        label: 'Account',
                        icon: Icons.account_box_outlined,
                    ),
                    CustomBottomBarItems(
                        label: 'Leaves', icon: Icons.calendar_today_outlined),
                    CustomBottomBarItems(
                        label: 'Loyalty',
                        icon: Icons.card_giftcard_rounded,
                    ),
                    CustomBottomBarItems(
                        label: 'Requests',
                        icon: Icons.list,
                    ),
                    ],
                ),
                );
            }
            }

Usage with gradient :

    class MyExample extends StatefulWidget {

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

    class _MyExampleState extends State<MyExample> {
        int _selectedIndex = 0; //default index

        List<Widget> _widgetOptions = [
            Text('Home'),
            Text('Account'),
            Text('Leaves'),
            Text('Loyalty'),
            Text('Requests'),
        ];
        @override
        Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Example'),
            ),
            body: Center(
                child: _widgetOptions.elementAt(_selectedIndex),
            ),
            bottomNavigationBar: CustomLineIndicatorBottomNavbar(
            selectedColor: Colors.white,
            unSelectedColor: Colors.black54,
            backgroundColor: Colors.white,
            currentIndex: _selectedIndex,
            onTap: (index) {
                setState(() {
                _selectedIndex = index;
                });
            },
            enableLineIndicator: true,
            lineIndicatorWidth: 3,
            indicatorType: IndicatorType.Top,
            gradient: LinearGradient(
                colors: [Colors.pink, Colors.yellow],
            ),
            customBottomBarItems: [
                CustomBottomBarItems(
                    label: 'Home',
                    icon: Icons.home,
                ),
                CustomBottomBarItems(
                    label: 'Account',
                    icon: Icons.account_box_outlined,
                ),
                CustomBottomBarItems(
                    label: 'Leaves', icon: Icons.calendar_today_outlined),
                CustomBottomBarItems(
                    label: 'Loyalty',
                    icon: Icons.card_giftcard_rounded,
                ),
                CustomBottomBarItems(
                    label: 'Requests',
                    icon: Icons.list,
                ),
            ],
            ),
        );
        }
    }

Constructor

Basic

Parameter Default Description Required
icon - Icon of bottom bar widget. true
label - Label text of bottom bar. true
selectedColor - Bottom tab selected color. false
unSelectedColor - Bottom tab unselected color. false
unSelectedFontSize 11 Unselected tab font size false
selectedFontSize 12 Selected tab font size. false
selectedIconSize 20 Selected tab icon size. false
unselectedIconSize 15 UnSelected tab icon size. false
splashColor - On click splash color. false
currentIndex - bottom nav bar list current index. false
onTap - On tap callback function to handle user click. true
index - List index. true
enableLineIndicator false Set to true if showing line indicator. false
lineIndicatorWidth 3 Width of line indicator. false
indicatorType IndicatorType.top Indicator type for ex. top and bottom. false
gradient - Gradient property for enable gradient color. false

Libraries

bottom_navbar_with_indicator
Documentation