How to Implement Fancy Bottom NavigationBar in Flutter?
Fancy Bottom NavigationBar is a MaterialApp widget that displays a bottom fancy navbar, Where items go between 2 and 4. Bottom NavigationBar is the list of icons or text in the horizontal form called a tab and Each tab contains their own page.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package in the pubspec.yaml File.
Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.
From the command line:
flutter pub add fancy_bottom_navigation
This will add something like that to your pubspec.yaml file:
Dart
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 fancy_bottom_navigation: ^0.3.3 |
Don’t forget to get the packages.
Note: when you are adding the dependency, version of plugin may changed.
Step 3: Import the Plugin into the main.dart file
import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';
Some key points of fancy bottom NavigationBar:
TabData:
- Take iconData That Display The Icon
- title Text To Be Shown
- onClick Action To do some task When Clicked.
initialSelection:
- Active PageIndex On Start
circleColor:
- Set The Background Of The Circle Globbing The Icon.
inactivelconColor:
- Set The Background Of Non-Selected Circle Globbing The Icon.
barBackgroundColor:
- Set The BackgroundColor Of The Main Bar
Syntax:
Creating PageIndex To Be Shown Var:
int currentPage = 0;
Creating StateKey Var:
GlobalKey bottom NavigationKey = GlobalKey();
Creating a Fancy BottomNavigationBar:
Dart
Scaffold( bottomNavigationBar:FancyBottomNavigation( initialSelection:0, key: bottomNavigationKey, circleColor:Colors.teal, inactiveIconColor:Colors.white, barBackgroundColor:Colors.lightBlueAccent, tabs: [ TabData( iconData: Icons.add, title: 'Add' , onclick: 00 ), //You Can Add More ] onTabChangedListener:(indexPage) { setState() ({ currentPage = indexPage; }); }, ), ) |
Code:
Dart
import 'package:flutter/material.dart' ; import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart' ; void main() => runApp(MaterialApp(home: FancyBottomNavBarRun() ,)); class FancyBottomNavBarRun extends StatefulWidget { const FancyBottomNavBarRun({Key? key}) : super(key: key); @override _FancyBottomNavBarState createState() => _FancyBottomNavBarState(); } class _FancyBottomNavBarState extends State<FancyBottomNavBarRun> { int currentPage = 0; // CurrentPage that hold the current tab value GlobalKey bottomNavigationKey = GlobalKey(); @override Widget build(BuildContext context) { return MaterialApp( // MaterialApp with debugShowCheckedModeBanner false, debugShowCheckedModeBanner: false , home:Scaffold( appBar: AppBar( title: const Text( "Fancy Bottom Navigation" ), ), body:Container( width:MediaQuery.of(context).size.width, height:MediaQuery.of(context).size.height, child: // Showing the body according to the currentPage index. (currentPage ==0 )? AddPage(): (currentPage ==1 )? ListPage(): ComparePage(), ), // NavigationBar which have three tab, each tab have icons and color bottomNavigationBar: FancyBottomNavigation( initialSelection:0, key: bottomNavigationKey, circleColor:Colors.teal, inactiveIconColor:Colors.white, barBackgroundColor:Colors.lightBlueAccent, tabs: [ TabData( iconData: Icons.add, title: "Add" , onclick: () {} ), TabData( iconData: Icons.list, title: "List" , onclick: () {} ), TabData( iconData: Icons.compare_arrows, title: "Compare" , onclick: () {} ), ], // When tab changes we also called the setState method to change the currentpage onTabChangedListener: (indexPage) { setState(() { currentPage = indexPage; }); }, ), ), ); } } // Classes for showing in the body of the app according to the current page index. class AddPage extends StatelessWidget{ @override Widget build(BuildContext context) { return Column( mainAxisAlignment:MainAxisAlignment.center, crossAxisAlignment:CrossAxisAlignment.center, children: [ const Icon(Icons.add, size: 30), const Text( "Add Page" ) ], ); } } class ListPage extends StatelessWidget{ @override Widget build(BuildContext context) { return Column( mainAxisAlignment:MainAxisAlignment.center, crossAxisAlignment:CrossAxisAlignment.center, children: [ const Icon(Icons.list, size: 30), const Text( "List Page" ) ], ); } } class ComparePage extends StatelessWidget{ @override Widget build(BuildContext context) { return Column( mainAxisAlignment:MainAxisAlignment.center, crossAxisAlignment:CrossAxisAlignment.center, children: [ const Icon(Icons.compare_arrows, size: 30), const Text( "Compare Page" ) ], ); } } |
Contact Us