In my flutter project I am using the persistent_bottom_nav_bar_v2 package (link: https://pub.dev/packages/persistent_bottom_nav_bar_v2) in order to create a custom bottom navigation bar that uses go_router.
My goal was to create a bottom bar, the tabs of which can move upwards when selected. The goal is to make my tabs move to the position of the center tab og the style 13 of the package, also seen in the first imagepersistent_bottom_nav_bar_v2 style 13.
The example given in the package shows that the color of the page behind the nav bar.
The code for the example of the persistent nav bar is here:
StatefulShellRoute.indexedStack(
builder: (context, state, navigationShell) => PersistentTabView.router(
tabs: [
PersistentRouterTabConfig(
item: ItemConfig(
icon: const Icon(Icons.home),
title: "Home",
),
),
PersistentRouterTabConfig(
item: ItemConfig(
icon: const Icon(Icons.message),
title: "Messages",
),
),
PersistentRouterTabConfig(
item: ItemConfig(
icon: const Icon(Icons.settings),
title: "Settings",
),
),
],
navBarBuilder: (navBarConfig) => Style1BottomNavBar(
navBarConfig: navBarConfig,
),
navigationShell: navigationShell,
),
branches: [
// The route branch for the 1st Tab
StatefulShellBranch(
navigatorKey: _shellKey,
routes: <RouteBase>[
GoRoute(
path: "home",
builder: (context, state) => const MainScreen(
useRouter: true,
),
routes: [
/// When you use the navigator Key that of the root navigator, this and all the sub routes will be pushed to the root navigator (-> without the navbar)
GoRoute(
parentNavigatorKey: _parentKey,
path: "detail",
builder: (context, state) => const MainScreen2(
useRouter: true,
),
routes: [
GoRoute(
path: "super-detail",
builder: (context, state) => const MainScreen3(),
),
],
),
],
),
],
),
// The route branch for 2nd Tab
StatefulShellBranch(
routes: <RouteBase>[
GoRoute(
path: "messages",
builder: (context, state) => const MainScreen(
useRouter: true,
),
routes: [subRoutes],
),
],
),
// The route branch for 3rd Tab
StatefulShellBranch(
routes: <RouteBase>[
GoRoute(
path: "settings",
builder: (context, state) => const MainScreen(
useRouter: true,
),
routes: [subRoutes],
),
],
),
Furthermore here is the code for style 13:
part of "../persistent_bottom_nav_bar_v2.dart";
class Style13BottomNavBar extends StatelessWidget {
Style13BottomNavBar({
required this.navBarConfig,
this.navBarDecoration = const NavBarDecoration(),
super.key,
}) : assert(
navBarConfig.items.length.isOdd,
"The number of items must be odd for this style",
);
final NavBarConfig navBarConfig;
final NavBarDecoration navBarDecoration;
Widget _buildItem(BuildContext context, ItemConfig item, bool isSelected) =>
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: IconTheme(
data: IconThemeData(
size: item.iconSize,
color: isSelected
? item.activeForegroundColor
: item.inactiveForegroundColor,
),
child: isSelected ? item.icon : item.inactiveIcon,
),
),
if (item.title != null)
FittedBox(
child: Text(
item.title!,
style: item.textStyle.apply(
color: isSelected
? item.activeForegroundColor
: item.inactiveForegroundColor,
),
),
),
],
);
Widget _buildMiddleItem(ItemConfig item, bool isSelected) => Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 150,
height: navBarConfig.navBarHeight,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: item.activeForegroundColor,
boxShadow: navBarDecoration.boxShadow,
),
child: Center(
child: IconTheme(
data: IconThemeData(
size: item.iconSize,
color: item.inactiveForegroundColor,
),
child: isSelected ? item.icon : item.inactiveIcon,
),
),
),
if (item.title != null)
Padding(
padding: const EdgeInsets.only(top: 5),
child: Align(
alignment: Alignment.bottomCenter,
child: FittedBox(
child: Text(
item.title!,
style: item.textStyle.apply(
color: isSelected
? item.activeForegroundColor
: item.inactiveForegroundColor,
),
),
),
),
),
],
);
@override
Widget build(BuildContext context) {
final midIndex = (navBarConfig.items.length / 2).floor();
return Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 23),
DecoratedNavBar(
decoration: navBarDecoration,
filter: navBarConfig.selectedItem.filter,
opacity: navBarConfig.selectedItem.opacity,
height: navBarConfig.navBarHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: navBarConfig.items.map((item) {
final int index = navBarConfig.items.indexOf(item);
return Expanded(
child: InkWell(
onTap: () {
navBarConfig.onItemSelected(index);
},
child: index == midIndex
? Container()
: _buildItem(
context,
item,
navBarConfig.selectedIndex == index,
),
),
);
}).toList(),
),
),
],
),
Positioned(
top: 0,
child: Center(
child: GestureDetector(
onTap: () {
navBarConfig.onItemSelected(midIndex);
},
child: _buildMiddleItem(
navBarConfig.items[midIndex],
navBarConfig.selectedIndex == midIndex,
),
),
),
),
],
);
}
}
Lastly here is the github repository for the package is here: https://github.com/jb3rndt/PersistentBottomNavBarV2
My code for the custom bottom nav bar is as follows:
class CustomBottomNavBar{
static StatefulShellRoute customBottomNavBar() {
return StatefulShellRoute.indexedStack(
builder: (context, state, navigationShell) => PersistentTabView.router(
tabs: [
PersistentRouterTabConfig(
item: ItemConfig(
activeForegroundColor: Color(0xFF7E54F1),
inactiveForegroundColor: Color(0xFF7E54F1),
icon: Icon(Icons.storefront_rounded),
title: "Restaurants",
),
),
PersistentRouterTabConfig(
item: ItemConfig(
activeForegroundColor: Color(0xFF7E54F1),
inactiveForegroundColor: Color(0xFF7E54F1),
icon: Icon(Icons.favorite),
title: "Favourites",
),
),
PersistentRouterTabConfig(
item: ItemConfig(
activeForegroundColor: Color(0xFF7E54F1),
inactiveForegroundColor: Color(0xFF7E54F1),
icon: Icon(Icons.person),
title: "Profile",
),
),
PersistentRouterTabConfig(
item: ItemConfig(
activeForegroundColor: Color(0xFF7E54F1),
inactiveForegroundColor: Color(0xFF7E54F1),
icon: Icon(Icons.settings),
title: "Settings",
),
),
],
navBarBuilder: (navBarConfig) => CustomBottomNavBarStyle(
navBarConfig: navBarConfig.copyWith(navBarHeight: 80),
navBarDecoration: NavBarDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Color(0xFF7E54F1).withOpacity(0.3),
spreadRadius: 0,
blurRadius: 5,
offset: const Offset(0, -5)
)
]),
),
navigationShell: navigationShell,
),
branches: [
StatefulShellBranch(routes: [CustomGoRoutes.restaurantSelection]),
StatefulShellBranch(routes: [CustomGoRoutes.wineHistory]),
StatefulShellBranch(routes: [CustomGoRoutes.profile]),
StatefulShellBranch(routes: [CustomGoRoutes.settings]),
],
);
}
}
And here is my custom style:
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar_v2/persistent_bottom_nav_bar_v2.dart';
class CustomBottomNavBarStyle extends StatelessWidget {
const CustomBottomNavBarStyle({
required this.navBarConfig,
this.navBarDecoration = const NavBarDecoration(),
this.itemAnimationProperties = const ItemAnimation(),
this.itemPadding = const EdgeInsets.all(5),
super.key,
});
final NavBarConfig navBarConfig;
final NavBarDecoration navBarDecoration;
final EdgeInsets itemPadding;
/// This controls the animation properties of the items of the NavBar.
final ItemAnimation itemAnimationProperties;
Widget _buildItemName(BuildContext context, ItemConfig item, bool isSelected, double offset) {
var itemIndex = navBarConfig.items.indexOf(item);
double screenWidth = MediaQuery.of(context).size.width;
double quarterWidth = screenWidth / 4;
return AnimatedPositioned(
left: (itemIndex * quarterWidth) + (quarterWidth / 2) - offset,
duration: const Duration(seconds: 1),
child: Center(
child: GestureDetector(
onTap: () {
navBarConfig.onItemSelected(itemIndex);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: FittedBox(
child: Text(
item.title!,
textAlign: TextAlign.center,
style: item.textStyle.copyWith(color: item.activeForegroundColor, fontWeight: isSelected ? FontWeight.bold : FontWeight.normal),
),
),
),
],
),
),
),
);
}
Widget _buildItem(BuildContext context, ItemConfig item, bool isSelected) {
double screenWidth = MediaQuery.of(context).size.width;
double quarterWidth = screenWidth / 4;
double width = 80;
var itemIndex = navBarConfig.items.indexOf(item);
return AnimatedPositioned(
top: navBarConfig.selectedIndex == itemIndex ? 0 : 20,
left: (itemIndex * quarterWidth) + (quarterWidth / 2) - (width / 2),
duration: const Duration(milliseconds: 100),
child: Center(
child: GestureDetector(
onTap: () {
navBarConfig.onItemSelected(itemIndex);
},
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: width,
height: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isSelected ? Colors.white : Colors.transparent,
boxShadow: [
BoxShadow(
color: isSelected ? Color(0xFF7E54F1).withOpacity(0.3) : Colors.transparent,
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, -5),
),
BoxShadow(
color: isSelected ? Colors.white : Colors.transparent,
spreadRadius: 3,
blurRadius: 0,
offset: const Offset(0, 0),
),
],
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
width: width,
height: 48,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isSelected ? item.activeForegroundColor : Colors.transparent,
),
child: Center(
child: IconTheme(
data: IconThemeData(
size: item.iconSize,
color: isSelected ? Colors.white : item.activeForegroundColor,
),
child: isSelected ? item.icon : item.inactiveIcon,
),
),
),
),
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 23),
DecoratedNavBar(
decoration: navBarDecoration,
filter: navBarConfig.selectedItem.filter,
opacity: navBarConfig.selectedItem.opacity,
height: navBarConfig.navBarHeight,
child: SizedBox(
width: MediaQuery.of(context).size.width,
),
),
],
),
_buildItem(
context,
navBarConfig.items[0],
navBarConfig.selectedIndex == 0,
),
_buildItemName(
context,
navBarConfig.items[0],
navBarConfig.selectedIndex == 0,
32,
),
_buildItem(
context,
navBarConfig.items[1],
navBarConfig.selectedIndex == 1,
),
_buildItemName(
context,
navBarConfig.items[1],
navBarConfig.selectedIndex == 1,
29,
),
_buildItem(
context,
navBarConfig.items[2],
navBarConfig.selectedIndex == 2,
),
_buildItemName(
context,
navBarConfig.items[2],
navBarConfig.selectedIndex == 2,
18.25,
),
_buildItem(
context,
navBarConfig.items[3],
navBarConfig.selectedIndex == 3,
),
_buildItemName(
context,
navBarConfig.items[3],
navBarConfig.selectedIndex == 3,
22.9,
),
],
);
}
}
The result of this code can be seen in the image here:Custom Style
While the mechanism to move the tabs up and down works, I have a couple of issues with how it looks.
My main issue is with the white padding above the bottom nav bar, as it should be transparent so the screen behind it can be visible.
I have tried replacing the SizedBox(height: 23) inside the column with the following:
Container(
height: 23,
width: MediaQuery.of(context).size.width,
color: Colors.transparent,
),
but as expected that didn’t fix the issue.
It is also weird that in the existing style 13 it uses the same sized box without issues, but on my code it shows that white padding.
Does anyone know what I am doing wrong?
Thank you all.