I am trying to implement navbar like this. But with standart flutter navbar I got a problem with central item - because there is some space for text and it is not centered properly. And also beacause of size it looks more thick
This is widget for bottom nav bar i use
return BottomNavigationBar(
backgroundColor: Theme.of(context).bottomAppBarColor,
selectedItemColor: Theme.of(context).iconTheme.color,
unselectedItemColor: Colors.grey[600],
type: BottomNavigationBarType.fixed,
selectedFontSize: 11,
unselectedFontSize: 10,
items: widget.children
.map(
(entry) => BottomNavigationBarItem(
icon: entry.icon,
activeIcon: entry.activeIcon,
label: entry.label ?? '',
),
)
.toList(),
currentIndex: widget.tabsRouter.activeIndex,
onTap: _onItemTapped,
);
And then like that
AutoTabsScaffold(
routes: [
CalendarRouter(),
EmployeesRouter(),
EmployeesRouter(),
EmployeesRouter(),
EmployeesRouter()
],
bottomNavigationBuilder: (_, tabsRouter) => BottomNavBarWidget(
tabsRouter: tabsRouter,
children: [
BottomBarItem(
label: 'Schedule',
child: CalendarScreen(),
activeIcon: Icon(
Icons.home_sharp,
size: 24,
),
icon: Icon(
Icons.home_outlined,
size: 24,
),
),
BottomBarItem(
activeIcon: Icon(
Icons.add_circle_outline,
size: 32,
),
icon: Icon(
Icons.add_circle_outline,
size: 32,
color: Colors.black,
),
CodePudding user response：
Add this your pubspc.yml file :
dependencies:
persistent_bottom_nav_bar: ^4.0.2
then Example : Your Desire one is the style 17 no .
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
import 'custom-widget-tabs.widget.dart';
import 'modal-screen.dart';
import 'screens.dart';
void main() => runApp(MyApp());
BuildContext testContext;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Persistent Bottom Navigation Bar example project',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainMenu(),
initialRoute: '/',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/first': (context) => MainScreen2(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => MainScreen3(),
},
);
}
}
class MainMenu extends StatefulWidget {
MainMenu({Key key}) : super(key: key);
@override
_MainMenuState createState() => _MainMenuState();
}
class _MainMenuState extends State<MainMenu> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample Project"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: ElevatedButton(
child: Text("Custom widget example"),
onPressed: () => pushNewScreen(
context,
screen: CustomWidgetExample(
menuScreenContext: context,
),
),
),
),
SizedBox(height: 20.0),
Center(
child: ElevatedButton(
child: Text("Built-in styles example"),
onPressed: () => pushNewScreen(
context,
screen: ProvidedStylesExample(
menuScreenContext: context,
),
),
),
),
],
),
);
}
}
// ----------------------------------------- Provided Style ----------------------------------------- //
class ProvidedStylesExample extends StatefulWidget {
final BuildContext menuScreenContext;
ProvidedStylesExample({Key key, this.menuScreenContext}) : super(key: key);
@override
_ProvidedStylesExampleState createState() => _ProvidedStylesExampleState();
}
class _ProvidedStylesExampleState extends State<ProvidedStylesExample> {
PersistentTabController _controller;
bool _hideNavBar;
@override
void initState() {
super.initState();
_controller = PersistentTabController(initialIndex: 0);
_hideNavBar = false;
}
List<Widget> _buildScreens() {
return [
MainScreen(
menuScreenContext: widget.menuScreenContext,
hideStatus: _hideNavBar,
onScreenHideButtonPressed: () {
setState(() {
_hideNavBar = !_hideNavBar;
});
},
),
MainScreen(
menuScreenContext: widget.menuScreenContext,
hideStatus: _hideNavBar,
onScreenHideButtonPressed: () {
setState(() {
_hideNavBar = !_hideNavBar;
});
},
),
MainScreen(
menuScreenContext: widget.menuScreenContext,
hideStatus: _hideNavBar,
onScreenHideButtonPressed: () {
setState(() {
_hideNavBar = !_hideNavBar;
});
},
),
MainScreen(
menuScreenContext: widget.menuScreenContext,
hideStatus: _hideNavBar,
onScreenHideButtonPressed: () {
setState(() {
_hideNavBar = !_hideNavBar;
});
},
),
MainScreen(
menuScreenContext: widget.menuScreenContext,
hideStatus: _hideNavBar,
onScreenHideButtonPressed: () {
setState(() {
_hideNavBar = !_hideNavBar;
});
},
),
];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Icon(Icons.home),
title: "Home",
activeColorPrimary: Colors.blue,
inactiveColorPrimary: Colors.grey,
inactiveColorSecondary: Colors.purple,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.search),
title: ("Search"),
activeColorPrimary: Colors.teal,
inactiveColorPrimary: Colors.grey,
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/',
routes: {
'/first': (context) => MainScreen2(),
'/second': (context) => MainScreen3(),
},
),
),
PersistentBottomNavBarItem(
icon: Icon(Icons.add),
title: ("Add"),
activeColorPrimary: Colors.blueAccent,
activeColorSecondary: Colors.white,
inactiveColorPrimary: Colors.white,
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/',
routes: {
'/first': (context) => MainScreen2(),
'/second': (context) => MainScreen3(),
},
),
onPressed: (context) {
pushDynamicScreen(context,
screen: SampleModalScreen(), withNavBar: true);
}),
PersistentBottomNavBarItem(
icon: Icon(Icons.message),
title: ("Messages"),
activeColorPrimary: Colors.deepOrange,
inactiveColorPrimary: Colors.grey,
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/',
routes: {
'/first': (context) => MainScreen2(),
'/second': (context) => MainScreen3(),
},
),
),
PersistentBottomNavBarItem(
icon: Icon(Icons.settings),
title: ("Settings"),
activeColorPrimary: Colors.indigo,
inactiveColorPrimary: Colors.grey,
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/',
routes: {
'/first': (context) => MainScreen2(),
'/second': (context) => MainScreen3(),
},
),
),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Navigation Bar Demo')),
drawer: Drawer(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('This is the Drawer'),
],
),
),
),
body: PersistentTabView(
context,
controller: _controller,
screens: _buildScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: Colors.white,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
stateManagement: true,
navBarHeight: MediaQuery.of(context).viewInsets.bottom > 0
? 0.0
: kBottomNavigationBarHeight,
hideNavigationBarWhenKeyboardShows: true,
margin: EdgeInsets.all(0.0),
popActionScreens: PopActionScreensType.all,
bottomScreenMargin: 0.0,
onWillPop: (context) async {
await showDialog(
context: context,
useSafeArea: true,
builder: (context) => Container(
height: 50.0,
width: 50.0,
color: Colors.white,
child: ElevatedButton(
child: Text("Close"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
return false;
},
selectedTabScreenContext: (context) {
testContext = context;
},
hideNavigationBar: _hideNavBar,
decoration: NavBarDecoration(
colorBehindNavBar: Colors.indigo,
borderRadius: BorderRadius.circular(20.0)),
popAllScreensOnTapOfSelectedTab: true,
itemAnimationProperties: ItemAnimationProperties(
duration: Duration(milliseconds: 400),
curve: Curves.ease,
),
screenTransitionAnimation: ScreenTransitionAnimation(
animateTabTransition: true,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
),
navBarStyle:
NavBarStyle.style17, // Choose the nav bar style with this property
),
);
}
}
// ----------------------------------------- Custom Style ----------------------------------------- //
class CustomNavBarWidget extends StatelessWidget {
final int selectedIndex;
final List<PersistentBottomNavBarItem> items;
final ValueChanged<int> onItemSelected;
CustomNavBarWidget({
Key key,
this.selectedIndex,
@required this.items,
this.onItemSelected,
});
Widget _buildItem(PersistentBottomNavBarItem item, bool isSelected) {
return Container(
alignment: Alignment.center,
height: kBottomNavigationBarHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: IconTheme(
data: IconThemeData(
size: 26.0,
color: isSelected
? (item.activeColorSecondary == null
? item.activeColorPrimary
: item.activeColorSecondary)
: item.inactiveColorPrimary == null
? item.activeColorPrimary
: item.inactiveColorPrimary),
child: isSelected ? item.icon : item.inactiveIcon ?? item.icon,
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Material(
type: MaterialType.transparency,
child: FittedBox(
child: Text(
item.title,
style: TextStyle(
color: isSelected
? (item.activeColorSecondary == null
? item.activeColorPrimary
: item.activeColorSecondary)
: item.inactiveColorPrimary,
fontWeight: FontWeight.w400,
fontSize: 12.0),
)),
),
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items.map((item) {
int index = items.indexOf(item);
return Flexible(
child: GestureDetector(
onTap: () {
this.onItemSelected(index);
},
child: _buildItem(item, selectedIndex == index),
),
);
}).toList(),
),
),
);
}
}
For More : Check the Link