Moony Navigation Bar

Make sure the library version in your app is the latest
as I will update and fix some bugs as soon as it is detected.
You can create issues and notify me of errors you see or when you have any questions.

Donate

GIF

- #1

- #2

- #3

- #4 Custom NavigationBarItem

- #5 with margin and border radius

Setup

With flutter

Run this command:

flutter pub add moony_nav_bar

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  moony_nav_bar: ^1.3.0

Import it

Now at your code, you can use:

import 'package:moony_nav_bar/moony_nav_bar.dart';

Style

All navigation bar style contained inside the MoonyNavStyle class

Attributes	Type	Default	Description
activeColor	Color	Color.black	Active Color
color	Color	Color.black45	Inactive navigation item color
indicatorColor	Color	activeColor	Indicator color
backgroundColor	Color	Colors.white	Background color
indicatorPosition	IndicatorPosition	IndicatorPosition.TOP	Indicator position
indicatorType	IndicatorType	IndicatorType.POINT	Indicator type
marginLeft	double	0	Margin left
marginRight	double	0	Margin right
marginBottom	double	0	Margin bottom
elevation	double	5	Navigation elevation
borderRadius	BorderRadius?	null	Navigation border radius. example : BorderRadius.circular(10)

NavigationBarItem attributes

Attributes	Type	Default	Description
icon	IconData		Default Icon required
onTap	NavigationButtonTapCallback		Tap listener required
activeIcon	IconData	null	Active icon optional
indicatorColor	Color	style.indicatorColor	Indicator color optional
color	Color	style.activeColor	Active icon color optional

Example

Note:

• _screen1, _screen2, _screen3, _screen4 is my example, you can replace them with your screen

import 'package:flutter/material.dart';
import 'package:moony_nav_bar/moony_nav_bar.dart';
import 'package:moony_nav_bar_example/screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget _screen1 = Screen1();
  Widget _screen2 = Screen2();
  Widget _screen3 = Screen3();
  Widget _screen4 = Screen4();
  int selectedIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Moony navigation bar'),
        ),
        body: getBody(),
        bottomNavigationBar: MoonyNavigationBar(
          items: <NavigationBarItem>[
            NavigationBarItem(
                icon: Icons.home_rounded,
                onTap: () {
                  onTapHandler(0);
                }),
            NavigationBarItem(
                icon: Icons.favorite_border_outlined,
                activeIcon: Icons.favorite,
                color: Colors.pink,
                indicatorColor: Colors.pink,
                onTap: () {
                  onTapHandler(1);
                }),
            NavigationBarItem(
                icon: Icons.search,
                onTap: () {
                  onTapHandler(2);
                }),
            NavigationBarItem(
                icon: Icons.person_outline,
                onTap: () {
                  onTapHandler(3);
                })
          ],
          style: MoonyNavStyle(
            activeColor: Theme.of(context).primaryColor,
            indicatorPosition: IndicatorPosition.TOP,
            indicatorType: IndicatorType.POINT,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
          ),
        ),
      ),
    );
  }

  Widget getBody() {
    if (this.selectedIndex == 0) {
      return this._screen1;
    } else if (this.selectedIndex == 1) {
      return this._screen2;
    } else if (this.selectedIndex == 2) {
      return this._screen3;
    }
    return this._screen4;
  }

  void onTapHandler(int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  }
}