persistent bottom nav bar not working properly - flutter

Question

I am trying to apply persistent_bottom_nav_bar but I keep getting error. I got similar answers and tried to follow https://pub.dev/packages/persistent_bottom_nav_bar
These are the errors that I keep getting.
The method '_BottomBarState' isn't defined for the type 'BottomBar'. & 1 positional argument(s) expected, but 0 found.
class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
#override
State<BottomBar> createState() => _BottomBarState();
}
PersistentTabController _controller = PersistentTabController(initialIndex: 0);
//Screens for each nav items.
List<Widget> _NavScreens() {
return [
HomeScreen(),
const Text("History"),
];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Icon(FluentSystemIcons.ic_fluent_home_regular),
title: "Home",
activeColorPrimary: Colors.blueGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.favorite),
title: ("History"),
activeColorPrimary: CupertinoColors.activeGreen,
),
];
}
#override
Widget build(BuildContext context) {
return Center(
child: PersistentTabView(
controller: _controller,
screens: _NavScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: Colors.white,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
hideNavigationBarWhenKeyboardShows: true,
decoration: NavBarDecoration(
borderRadius: BorderRadius.circular(10.0),
),
popAllScreensOnTapOfSelectedTab: true,
navBarStyle: NavBarStyle.style9,
),
);
}
This is the original bottom bar that I want to keep fixed in all screens
class _BottomBarState extends State<BottomBar> {
int _selectedIndex = 0;
static final List<Widget> _widgetOptions = <Widget>[
HomeScreen(),
const Text("History"),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
//print('Tapped index is: ${_selectedIndex}');
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetOptions[_selectedIndex],
),
bottomNavigationBar: Column(
mainAxisSize: MainAxisSize.min,
children: [
BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
...............................
items: const [
BottomNavigationBarItem(
icon: Icon(FluentSystemIcons.ic_fluent_home_regular),
label: "Home"),
BottomNavigationBarItem(
icon: Icon(FluentSystemIcons.ic_fluent_history_regular),
label: "History"),
],),],),);}}
How to apply presistent bottom bar to my project without changing the design? Why am I reciving this error and how to fix it.

Answer 1

persistent_bottom_nav_bar.dart
import 'package:flutter/material.dart';
import 'bottom_nav_bar.dart';
class MyPersistentBottomNavBar extends StatelessWidget {
const MyPersistentBottomNavBar({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Persistent Bottom Nav Bar',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.deepPurple),
home: const BottomNavBar(),
);
}
}
bottom_nav_bar.dart :
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar_v2/persistent-tab-view.dart';
import 'pages/home_page.dart';
import 'pages/explore_page.dart';
import 'pages/add_page.dart';
import 'pages/inbox_page.dart';
import 'pages/shopping_page.dart';
class BottomNavBar extends StatelessWidget {
const BottomNavBar({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
PersistentTabController controller;
controller = PersistentTabController(initialIndex: 0);
List<Widget> _buildScreens() {
return [
const HomePage(),
const ExplorePage(),
const AddPage(),
const InboxPage(),
const ShoppingPage(),
];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: const Icon(Icons.home),
title: ("Home"),
activeColorPrimary: Colors.deepPurple,
inactiveColorPrimary: Colors.grey,
),
PersistentBottomNavBarItem(
icon: const Icon(Icons.explore),
title: ("Explore"),
activeColorPrimary: Colors.deepPurple,
inactiveColorPrimary: Colors.grey,
),
PersistentBottomNavBarItem(
icon: const Icon(Icons.add, color: Colors.white),
activeColorPrimary: Colors.deepPurple,
inactiveColorPrimary: Colors.grey,
),
PersistentBottomNavBarItem(
icon: const Icon(Icons.email),
title: ("Inbox"),
activeColorPrimary: Colors.deepPurple,
inactiveColorPrimary: Colors.grey,
),
PersistentBottomNavBarItem(
icon: const Icon(Icons.shopping_bag),
title: ("Shop"),
activeColorPrimary: Colors.deepPurple,
inactiveColorPrimary: Colors.grey,
),
];
}
return PersistentTabView(
context,
controller: controller,
screens: _buildScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: Colors.white, // Default is Colors.white.
handleAndroidBackButtonPress: true, // Default is true.
resizeToAvoidBottomInset:
true, // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
stateManagement: true, // Default is true.
hideNavigationBarWhenKeyboardShows:
true, // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
decoration: NavBarDecoration(
borderRadius: BorderRadius.circular(10.0),
colorBehindNavBar: Colors.white,
),
popAllScreensOnTapOfSelectedTab: true,
popActionScreens: PopActionScreensType.all,
itemAnimationProperties: const ItemAnimationProperties(
// Navigation Bar's items animation properties.
duration: Duration(milliseconds: 200),
curve: Curves.ease,
),
screenTransitionAnimation: const ScreenTransitionAnimation(
// Screen transition animation on change of selected tab.
animateTabTransition: true,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
),
navBarStyle:
NavBarStyle.style15, // Choose the nav bar style with this property.
);
}
}
Please see code for other pages from the GitHub URL below:
https://github.com/md-siam/package_of_the_day/tree/master/lib/51_persistent_bottom_nav_bar/pages

Answer 2

I have tried this code.It runs fine, can you please try?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:minawill/ui/home/home.dart';
class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
#override
State<BottomBar> createState() => _BottomBarState();
}
class _BottomBarState extends State<BottomBar> {
int _selectedIndex = 0;
static final List<Widget> _widgetOptions = <Widget>[
HomeScreen(),
const Text("History"),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
//print('Tapped index is: ${_selectedIndex}');
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetOptions[_selectedIndex],
),
bottomNavigationBar: Column(
mainAxisSize: MainAxisSize.min,
children: [
BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.add),
label: "Home"),
BottomNavigationBarItem(
icon: Icon(Icons.phone),
label: "History"),
],),],),);}
}
i have added a photo of my output.Please check