> For the complete documentation index, see [llms.txt](https://dev-comentry.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev-comentry.gitbook.io/docs/flutter/moony-navigation-bar.md). # 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 [![Buy Me A Coffee](https://camo.githubusercontent.com/3ba8042b343d12b84b85d2e6563376af4150f9cd09e72428349c1656083c8b5a/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f64656661756c742d6f72616e67652e706e67)](https://www.buymeacoffee.com/doctorblue) [![paypal](https://camo.githubusercontent.com/361950b331ef676b7eec436a4dbe5a7ce47211a6623dcc889b1f5b7b611b27df/68747470733a2f2f7777772e70617970616c6f626a656374732e636f6d2f656e5f55532f692f62746e2f62746e5f646f6e61746543435f4c472e676966)](https://www.paypal.me/doctorblue00) ## GIF \ \- #1 [![](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview1.gif)](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview1.gif) \- #2 [![](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview3.gif)](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview3.gif) \- #3 [![](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview4.gif)](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview4.gif) \- #4 Custom NavigationBarItem [![](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview2.gif)](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview2.gif) \- #5 with margin and border radius [![](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview5.gif)](https://raw.githubusercontent.com/doctor-blue/moony_nav_bar_flutter/master/preview/preview5.gif) ## 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 ```dart 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 { 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( 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; }); } } ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://dev-comentry.gitbook.io/docs/flutter/moony-navigation-bar.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.