moony_nav_bar

Description:

moony nav bar

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.
copied to clipboard
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
copied to clipboard
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
copied to clipboard
Import it #
Now at your code, you can use:
import 'package:moony_nav_bar/moony_nav_bar.dart';
copied to clipboard
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;
});
}
}

copied to clipboard