bottom_navbar_with_indicator 0.0.9

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.
• pass dynamic icon with label.
• choose our own style like IconSize, FontSize, selectedColor,unSelectedColor, splashColor & call back function (onTap).

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:

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyExample(),
    );
  }
}

class MyExample extends StatefulWidget {
  const MyExample({super.key});

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

class _MyExampleState extends State<MyExample> {
  int _selectedIndex = 0; //default index
  static const String basePath = "assets/images";
  static const String accountImage = "$basePath/account.png";

  final List<Widget> _widgetOptions = [
    const Text('Home'),
    const Text('Account'),
    const Text('Leaves'),
    const Text('Loyalty'),
    const Text('Requests'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: CustomLineIndicatorBottomNavbar(
        selectedColor: Colors.blue,
        unSelectedColor: Colors.black54,
        backgroundColor: Colors.white,
        currentIndex: _selectedIndex,
        unselectedIconSize: 15,
        selectedIconSize: 20,
        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,
            // assetsImagePath: accountImage,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Account',
            //icon: Icons.account_box_outlined,
            assetsImagePath: accountImage,
            isAssetsImage: true,
          ),
          CustomBottomBarItems(
            label: 'Leaves',
            icon: Icons.calendar_today_outlined,
            // assetsImagePath: accountImage,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Loyalty',
            icon: Icons.card_giftcard_rounded,
            assetsImagePath: accountImage,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Requests',
            // icon: Icons.list,
            assetsImagePath: accountImage,
            isAssetsImage: true,
          ),
        ],
      ),
    );
  }
}

Usage with gradient :

class MyExample extends StatefulWidget {
  const MyExample({super.key});

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

class _MyExampleState extends State<MyExample> {
  int _selectedIndex = 0; //default index
  static const String basePath = "assets/images";
  static const String accountImage = "$basePath/account.png";

  final List<Widget> _widgetOptions = [
    const Text('Home'),
    const Text('Account'),
    const Text('Leaves'),
    const Text('Loyalty'),
    const Text('Requests'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: CustomLineIndicatorBottomNavbar(
        selectedColor: Colors.blue,
        unSelectedColor: Colors.black54,
        backgroundColor: Colors.white,
        currentIndex: _selectedIndex,
        unselectedIconSize: 15,
        selectedIconSize: 20,
        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,
            // assetsImagePath: accountImage,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Account',
            //icon: Icons.account_box_outlined,
            assetsImagePath: accountImage,
            isAssetsImage: true,
          ),
          CustomBottomBarItems(
            label: 'Leaves',
            icon: Icons.calendar_today_outlined,
            // assetsImagePath: accountImage,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Loyalty',
            icon: Icons.card_giftcard_rounded,
            assetsImagePath: accountImage,
            isAssetsImage: false,
          ),
          CustomBottomBarItems(
            label: 'Requests',
            // icon: Icons.list,
            assetsImagePath: accountImage,
            isAssetsImage: true,
          ),
        ],
      ),
    );
  }
}

Constructor

Basic

Parameter	Default	Description	Required
icon	-	Icon of bottom bar widget.	true
label	-	Label text of bottom bar.	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