Issue
I implemented different types of menus (bottom navigation bar, cupertino and custom navigation bar), but I didn’t solve the problem.
I don’t want to use the app bar to go back, only the menu.
So the workflow will be like this: 3 buttons – feed, home and profile.
On home page from the menu I will have a button. When I press that button, I want to display the menu even if no buttons are active in that moment.
The cupertino solution worked for me, but I have a problem. The home button it’s active and I can’t go back to home screen.
class Menu extends StatefulWidget {
const Menu({Key? key}) : super(key: key);
@override
_MenuState createState() => _MenuState();
}
class _MenuState extends State<Menu> {
int _currentIndex = 1;
final List _children = [
Feed(),
Home(),
Profile(),
];
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
backgroundColor: Colors.transparent,
tabBar: CupertinoTabBar(
onTap: onTabTapped, // new
currentIndex: _currentIndex,
//type: BottomNavigationBarType.fixed, // Fixed
backgroundColor: Colors.white, // <-- This works for fixed
//unselectedItemColor: Color(0xff221F1E),
//selectedItemColor: Color(0xffE4BDB6),
//showSelectedLabels: false,
//showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.chat_rounded, size: 28),
label: 'Feed',
),
BottomNavigationBarItem(
icon: new Icon(Icons.home, size: 28),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle, size: 28),
label: 'Profile'
)
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (BuildContext context) {
return SafeArea(
top: false,
bottom: false,
child: CupertinoApp(
home: CupertinoPageScaffold(
resizeToAvoidBottomInset: false,
child: _children[_currentIndex],
),
),
);
},
);
}
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
In the home widget –
onTap: () {
Navigator.of(context, rootNavigator: false).pushReplacement(MaterialPageRoute(
builder: (context) => VisionBoard(), maintainState: false));
}
I want after I click that button from Home page, to have the possibility to return to home page/widget by clicking on it. Now, it appears active and nothing happens.
Solution
You can use persistent_bottom_nav_bar to achieve your expectation. Do as follows:
late PersistentTabController _controller;
@override
void initState() {
super.initState();
_controller = PersistentTabController(initialIndex: 0);
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Image.asset('assets/logowhite.png', height: 30, width: 30),
inactiveIcon:
Image.asset('assets/logowhite.png', height: 30, width: 30),
title: "Vesvusa",
textStyle: const TextStyle(color: Colors.white),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/dashboard',
routes: {
'/newsevents': (context) => NewsListScreen(
menuScreenContext: context,
hideMainAppBar: hideMainAppBar,
itemCount: null),
'/blogdetails': (context) => BlogDetails(
menuScreenContext: context,
hideMainAppBar: hideMainAppBar,
),
'/videoslist': (context) => VideosList(menuScreenContext: context),
'/bookings': (context) => Bookings(menuScreenContext: context),
'/lookstheme': (context) => LooksTheme(menuScreenContext: context),
'/catalog': (context) => Catalog(menuScreenContext: context),
'/productdetails': (context) =>
ProductDetails(menuScreenContext: context),
},
),
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/search.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/search.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Search"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
routeAndNavigatorSettings: const RouteAndNavigatorSettings(
initialRoute: '/search',
routes: {
// '/first': (context) => MainScreen2(),
// '/second': (context) => MainScreen3(),
},
),
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/favourite.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/favourite.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Favorite"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
textStyle: const TextStyle(color: Colors.white),
routeAndNavigatorSettings: const RouteAndNavigatorSettings(
initialRoute: '/favorite',
routes: {
// '/first': (context) => MainScreen2(),
// '/second': (context) => MainScreen3(),
},
),
// onPressed: (context) {
// pushDynamicScreen(context,
// screen: SampleModalScreen(), withNavBar: true);
// }
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/cart.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/cart.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Cart"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
textStyle: const TextStyle(color: Colors.white),
routeAndNavigatorSettings: const RouteAndNavigatorSettings(
initialRoute: '/cart',
routes: {
// '/first': (context) => MainScreen2(),
// '/second': (context) => MainScreen3(),
},
),
),
PersistentBottomNavBarItem(
icon: Image.asset(
'assets/profile.png',
height: 25,
width: 25,
color: Colors.white,
),
inactiveIcon: Image.asset(
'assets/profile.png',
height: 25,
width: 25,
color: Colors.white,
),
title: ("Profile"),
activeColorPrimary: MyTheme.grey,
activeColorSecondary: Colors.white,
contentPadding: 5,
inactiveColorPrimary: Colors.white,
inactiveColorSecondary: Colors.white,
textStyle: const TextStyle(color: Colors.white),
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: '/profile',
routes: {
'/orders': (context) => MyOrders(
menuScreenContext: context,
),
'/loginsecurity': (context) => LoginSecurity(
menuScreenContext: context,
),
'/payment': (context) => Payment(
menuScreenContext: context,
),
'/message': (context) => Messages(
menuScreenContext: context,
),
'/devices': (context) => Devices(
menuScreenContext: context,
),
'/devices': (context) => Devices(
menuScreenContext: context,
),
'/inboxdetails': (context) => InboxDetails(
menuScreenContext: context,
),
'/loyalty': (context) => Loyalty(menuScreenContext: context),
},
),
),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: MyTheme.themeColor,
appBar: AppBar(
elevation: 0,
iconTheme: IconThemeData(
color: MyTheme.grey,
),
centerTitle: true,
backgroundColor: MyTheme.themeColor,
title: Image.asset("assets/titles.png", height: 60, width: 100),
actions: [
Builder(
builder: (context) {
return InkWell(
onTap: () {
Scaffold.of(context).openEndDrawer();
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Icon(Icons.notifications_none_outlined,
color: MyTheme.grey),
));
},
)
],
),
drawer: MyDrawer(),
endDrawer: const NotificationDrawer(),
body: PersistentTabView(
context,
controller: _controller,
screens: _buildScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: MyTheme.themeColor,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
stateManagement: true,
hideNavigationBarWhenKeyboardShows: true,
margin: const EdgeInsets.all(0.0),
popActionScreens: PopActionScreensType.once,
bottomScreenMargin: 0.0,
onWillPop: (context) async {
await showDialog(
context: context!,
useSafeArea: false,
builder: (context) => CommonAlert());
return false;
},
selectedTabScreenContext: (context) {
context = context;
},
hideNavigationBar: _hideNavBar,
popAllScreensOnTapOfSelectedTab: true,
itemAnimationProperties: const ItemAnimationProperties(
duration: Duration(milliseconds: 200),
curve: Curves.ease,
),
screenTransitionAnimation: const ScreenTransitionAnimation(
animateTabTransition: true,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
),
navBarStyle:
NavBarStyle.style7, // Choose the nav bar style with this property
),
);
}
You can navigate to other page doing this
pushNewScreen(context,
screen: Loyalty(
menuScreenContext: context,
),pageTransitionAnimation:PageTransitionAnimation.scale);
},
Answered By – Nbn
Answer Checked By – Cary Denson (FlutterFixes Admin)