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.

Buy Me A Coffee paypal

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

AttributesTypeDefaultDescription
activeColorColorColor.blackActive Color
colorColorColor.black45Inactive navigation item color
indicatorColorColoractiveColorIndicator color
backgroundColorColorColors.whiteBackground color
indicatorPositionIndicatorPositionIndicatorPosition.TOPIndicator position
indicatorTypeIndicatorTypeIndicatorType.POINTIndicator type
marginLeftdouble0Margin left
marginRightdouble0Margin right
marginBottomdouble0Margin bottom
elevationdouble5Navigation elevation
borderRadiusBorderRadius?nullNavigation border radius. example : BorderRadius.circular(10)
AttributesTypeDefaultDescription
iconIconDataDefault Icon required
onTapNavigationButtonTapCallbackTap listener required
activeIconIconDatanullActive icon optional
indicatorColorColorstyle.indicatorColorIndicator color optional
colorColorstyle.activeColorActive 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;
    });
  }
}

Libraries

moony_nav_bar
moony_nav_bar_flutter
moony_nav_bar_flutter_web