Implement Bottom Navy Bar In Flutter

Whenever you will code for building anything in Flutter, it will be inside a widget. The focal design is to construct the application out of widgets. It depicts how your application view should look with its ongoing design and state. Right when you make any changes in the code, the widget adjusts its portrayal by working out the separation between the past and current widget to pick the unimportant changes for conveying in the UI of the application.

In Flutter, to assemble any application, we start with widgets. The building block of flutter applications. Widgets depict what their view ought to resemble given their ongoing setup and state. It consists of a text widget, line widget, segment widget, container widget, and some more.

In this article, we will explore the Bottom Navy Bar In Flutter. We will implement the Bottom Navy Bar demo program and learn how to use the same in your flutter applications.

bottom_navy_bar | Flutter Package
A beautiful and animated bottom navigation. The navigation bar uses your current theme, but you are free to customize…pub.dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

Bottom Navy Bar

Properties

Code Implement

Code File

Conclusion

GitHub Link

Bottom Navy Bar:

Bottom Navy Bar in Flutter is a lovely and animated bottom navigation Widget. The navigation bar utilizes our ongoing theme, yet we are allowed to customize it.

We have the BottomNavyBar widget, which we can use in the Scaffold to give the bottom navigation bar. Alongside it, we additionally have BottomNavyBarItem, which we can use inside the BottomNavyBar widget to give the items.

Demo Module :

Properties:

There are some properties of Bottom Navy Bar and Bottom Navy Bar Item:

> BottomNavyBar

• iconSize – the item icon’s size
• items – navigation items, required more than one item and less than six
• selectedIndex – the current item index. Use this to change the selected item. Default to zero
• onItemSelected – required to listen when an item is tapped it provides the selected item’s index
• backgroundColor – the navigation bar’s background color
• showElevation – if false the app bar’s elevation will be removed
• mainAxisAlignment – use this property to change the horizontal alignment of the items. It is mostly used when you have only two items and you want to center the items
• curve – param to customize the item change’s animation
• containerHeight – changes the Navigation Bar’s height

> BottomNavyBarItem

• icon – the icon of this item
• title – the text that will appear next to the icon when this item is selected
• activeColor – the active item’s background and text color
• inactiveColor – the inactive item’s icon color
• textAlign – property to change the alignment of the item title

How to implement code in dart file:

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

First, we implement PageView with a controller and multiple children in our scaffold.

PageView(
controller: _pageController,
children: <Widget>[
Container(
color: Colors.red,
child: Center(
child: Image.asset(
'assets/1.jpeg',
),
),
),
Container(
color: Colors.green,
child: Center(
child: Image.asset(
'assets/2.jpeg',
),
),
),
Container(
color: Colors.yellow,
child: Center(
child: Image.asset(
'assets/3.jpeg',
),
),
),
Container(
color: Colors.blue,
child: Center(
child: Image.asset(
'assets/4.jpeg',
),
),
),
],
),

then we implement the bottom navy bar as the bottom navigation bar in our scaffold,

BottomNavyBar(
containerHeight: 55.0,
backgroundColor: Colors.white70,
selectedIndex: _currentIndex,
showElevation: false,
itemCornerRadius: 24,
curve: Curves.easeIn,
onItemSelected: (index) => setState(() {
_currentIndex = index;
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 100),
curve: Curves.easeIn);
}),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

and then we items for the bottom navy bar with different icons and different properties,

items: <BottomNavyBarItem>[
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.apps),
title: const Text('Home'),
activeColor: Colors.red,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.search_outlined),
title: const Text('Search'),
activeColor: Colors.green,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.settings),
title: const Text(
'Settings ',
),
activeColor: Colors.yellow,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.account_box),
title: const Text('Account'),
activeColor: Colors.blue,
textAlign: TextAlign.center,
),
],

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:example_bottom_navy_bar/splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';void main() {
runApp(const MyApp());
}class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Splash(),
);
}
}class MyBottomNavyBar extends StatefulWidget {
const MyBottomNavyBar({Key? key}) : super(key: key); @override
BottomNavyBarState createState() => BottomNavyBarState();
}class BottomNavyBarState extends State<MyBottomNavyBar> {
PageController _pageController = PageController();
int _currentIndex = 0; @override
void initState() {
super.initState();
_pageController = PageController();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Center(
child: Text("Bottom Navy Bar"),
),
),
body: PageView(
controller: _pageController,
children: <Widget>[
Container(
color: Colors.red,
child: Center(
child: Image.asset(
'assets/1.jpeg',
),
),
),
Container(
color: Colors.green,
child: Center(
child: Image.asset(
'assets/2.jpeg',
),
),
),
Container(
color: Colors.yellow,
child: Center(
child: Image.asset(
'assets/3.jpeg',
),
),
),
Container(
color: Colors.blue,
child: Center(
child: Image.asset(
'assets/4.jpeg',
),
),
),
],
),
bottomNavigationBar: BottomNavyBar(
containerHeight: 55.0,
backgroundColor: Colors.white70,
selectedIndex: _currentIndex,
showElevation: false,
itemCornerRadius: 24,
curve: Curves.easeIn,
onItemSelected: (index) => setState(() {
_currentIndex = index;
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 100),
curve: Curves.easeIn);
}),
items: <BottomNavyBarItem>[
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.apps),
title: const Text('Home'),
activeColor: Colors.red,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.search_outlined),
title: const Text('Search'),
activeColor: Colors.green,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.settings),
title: const Text(
'Settings ',
),
activeColor: Colors.yellow,
textAlign: TextAlign.center,
),
BottomNavyBarItem(
inactiveColor: Colors.black,
icon: const Icon(Icons.account_box),
title: const Text('Account'),
activeColor: Colors.blue,
textAlign: TextAlign.center,
),
],
),
);
} @override
void dispose() {
_pageController.dispose();
super.dispose();
}
}

Conclusion:

In the article, I have explained the actual construction of the Bottom Navy Bar widget in a flutter; you can alter this code as per your choice. This was a little introduction to the Bottom Navy Bar widget on User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide sufficient information on Trying up the Bottom Navy Bar widget in your flutter projects. We showed you what the Bottom Navy Bar widget is, and the properties of the Bottom Navy Bar widget. We made a demo program for working Bottom Navy Bar widget. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

GitHub Link:

find the source code of the bottom_navy_bar:

GitHub — flutter-devs/example_bottom_navy_bar
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.