bottom_navbar_with_indicator 0.0.7

A custom indicator bottom navigation bar provides top and bottom indicator line with custom decoration and style.

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

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 - 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,
            ),
        ],
        ),
    );
    }
}