I have a PageView to show 4 pages and a BottomNavigationBar to switch them. I'm having troubles with the PageController.
In any page, I navigate to a new Screen, but when get back, the PageView return to the initial page and no to the last page.
Here is how I using the PageView
#override
void initState() {
super.initState();
_page = 0;
_pageController = PageController(keepPage: true);
}
return Scaffold(
appBar: AppBar(
title: getAppBarTitle(_page),
centerTitle: true,
actions: renderActions(_page)),
body: PageView(
children: <Widget>[
DashboardScreen(),
InstructionsScreen(),
CatalogScreen(),
ProfileScreen()
],
controller: _pageController,
onPageChanged: onPageChanged,
physics: NeverScrollableScrollPhysics()),
bottomNavigationBar: BottomNavigationBar(
key: bottomNavigationBar,
type: BottomNavigationBarType.shifting,
onTap: navigationTapped,
currentIndex: _page,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.grey),
activeIcon:
Icon(Icons.home, color: Theme.of(context).primaryColor),
title: Text('Dashboard',
style: TextStyle(color: Theme.of(context).primaryColor)),
backgroundColor: Colors.white),
BottomNavigationBarItem(
icon: Icon(Icons.receipt, color: Colors.grey),
activeIcon:
Icon(Icons.receipt, color: Theme.of(context).primaryColor),
title: Text('Instructions',
style: TextStyle(color: Theme.of(context).primaryColor)),
backgroundColor: Colors.white),
BottomNavigationBarItem(
icon: Icon(Icons.dashboard, color: Colors.grey),
activeIcon:
Icon(Icons.dashboard, color: Theme.of(context).primaryColor),
title: Text('Catalog',
style: TextStyle(color: Theme.of(context).primaryColor)),
backgroundColor: Colors.white),
BottomNavigationBarItem(
icon: Icon(Icons.person, color: Colors.grey),
activeIcon:
Icon(Icons.person, color: Theme.of(context).primaryColor),
title: Text('Profile',
style: TextStyle(color: Theme.of(context).primaryColor)),
backgroundColor: Colors.white)
],
),
);
void navigationTapped(int page) {
_pageController.animateToPage(page,
duration: const Duration(milliseconds: 300), curve: Curves.ease);
}
void onPageChanged(int page) {
setState(() {
this._page = page;
});
}
In the DashboardScreen for example, I go to a new page like:
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => CodeScreen()))
How can I fix this? I need to use Redux or Bloc to achieve this?
Thanks.
Related
I need to change color of selected BottomNavigationBarItem to yellow, but it doesn't work.
It seems because i set BottomNavigationBarItem default colors as black, but otherwise they will be set as white, cause i created more than 3 items, and i don't know hot to fix them either
If you know how to fix this or white color bug, please inform me
body: Center(
child: _widgetopt.elementAt(_selind),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.redAccent,
backgroundColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.add_box_outlined,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
icon: Icon(
Icons.location_on_outlined,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
icon: Icon(
Icons.heart_broken_outlined,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
icon: Icon(
Icons.person_outline_outlined,
color: Colors.black,
),
label: ''),
],
currentIndex: _selind,
onTap: OnBeingTapped,
),
),
title: 'Stadium',
);
}
}
Rest of code:
class _HomePageState extends State<HomePage> {
int _selind = 0;
List<Widget> _widgetopt = <Widget>[
Text('Index 1'),
Text('Index 2'),
Text('Index 3'),
Text('Index 4'),
];
void OnBeingTapped(int index) {
setState(() {
_selind = index;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'Стадионы',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
toolbarHeight: 100,
actions: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.menu_outlined,
color: Colors.black,
)),
IconButton(
onPressed: () {},
icon: Icon(
Icons.text_rotation_down_outlined,
color: Colors.black,
)),
],
),
You forgot to add selectedItemColor property of BottomNavigationBarItem widget. Just add below line in your code and you'll be able to see selected item color yellow from black.
currentIndex: _selind,
selectedItemColor: Colors.yellow, // Add this line :)
onTap: OnBeingTapped,
I have 2 different BottomNavigationBar's defined within my app. One for authenticated users and another for unauthenticated users.
Listed below are the variables relevant to the BottomNavigationBar:
int selectedIndex = 0;
final authenticatedScreens = [
HomePage(),
SearchPage(),
CoursesPage(),
ProfilePage(),
];
final unAuthenticatedScreens = [
HomePage(),
SearchPage(),
CoursesPage(),
SignIn(),
];
Listed below is the code present within the build method:
.
.
.
return user == null
? Container(
child: Scaffold(
bottomNavigationBar: buildUnAuthenticatedBottomNavigationBar(context),
body: SafeArea(child: unAuthenticatedScreens[selectedIndex]),
),
)
: Container(
child: Scaffold(
bottomNavigationBar: buildAuthenticatedBottomNavigationBar(context),
body: SafeArea(child: authenticatedScreens[selectedIndex]),
),
);
.
.
.
Listed below is the code for authenticated and unauthenticated BottomNavigationBar's:
BottomNavigationBar buildAuthenticatedBottomNavigationBar(BuildContext context) {
return BottomNavigationBar(
currentIndex: selectedIndex,
onTap: (index) => setState(() => selectedIndex = index),
type: BottomNavigationBarType.fixed,
selectedLabelStyle: TextStyle(
fontSize: 8.sp,
fontWeight: FontWeight.w600,
color: Theme.of(context).iconTheme.color,
),
unselectedLabelStyle: TextStyle(
fontSize: 8.sp,
fontWeight: FontWeight.w400,
color: Theme.of(context).iconTheme.color!.withOpacity(0.4),
),
showSelectedLabels: true,
showUnselectedLabels: true,
selectedItemColor: Theme.of(context).iconTheme.color,
unselectedItemColor: Theme.of(context).iconTheme.color!.withOpacity(0.4),
items: [
BottomNavigationBarItem(
label: "Home",
icon: Icon(
Icons.home,
),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(
Icons.search,
),
),
BottomNavigationBarItem(
label: "Courses",
icon: Icon(
Icons.auto_stories_outlined,
),
activeIcon: Icon(
Icons.auto_stories,
),
),
BottomNavigationBarItem(
label: "Account",
icon: Icon(
Icons.person,
),
),
],
);
}
BottomNavigationBar buildUnAuthenticatedBottomNavigationBar(BuildContext context) {
return BottomNavigationBar(
currentIndex: selectedIndex,
onTap: (index) => setState(() => selectedIndex = index),
type: BottomNavigationBarType.fixed,
selectedLabelStyle: TextStyle(
fontSize: 8.sp,
fontWeight: FontWeight.w600,
color: Theme.of(context).iconTheme.color,
),
unselectedLabelStyle: TextStyle(
fontSize: 8.sp,
fontWeight: FontWeight.w400,
color: Theme.of(context).iconTheme.color!.withOpacity(0.4),
),
showSelectedLabels: true,
showUnselectedLabels: true,
selectedItemColor: Theme.of(context).iconTheme.color,
unselectedItemColor: Theme.of(context).iconTheme.color!.withOpacity(0.4),
items: [
BottomNavigationBarItem(
label: "Home",
icon: Icon(
Icons.home,
),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(
Icons.search,
),
),
BottomNavigationBarItem(
label: "Courses",
icon: Icon(
Icons.auto_stories_outlined,
),
activeIcon: Icon(
Icons.auto_stories,
),
),
BottomNavigationBarItem(
label: "Account",
icon: Icon(
Icons.person,
),
),
],
);
}
When I navigate to another screen from any of the 4 screens which are part of the BottomNavigationBar. The BottomNavigationBar disappears, I don't want the BottomNavigationBar to disappear. I want the BottomNavigationBar to remain persistent for certain screens and disappear for certain screens.
I did explore few solutions but didn't work out for me. I wouldn't like to make use of the Cupertino widgets.
How can I fix this?
With using this package Presistant_bottom_nav_bar.so you can use bottomnavbar on every screen or you can do the above method
PersistentTabController _controller =PersistentTabController(initialIndex: 1);
//Screens for each nav items.
List<Widget> _NavScreens() {
return [
OfferScreen(),
HelpScreen(),
HomeScreen(),
ProfileScreen(),
CartViewScreen(),
];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Icon(Icons.home),
title: ("Home"),
activeColor: CupertinoColors.activeBlue,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.favorite),
title: ("OFFERS"),
activeColor: CupertinoColors.activeGreen,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.person_pin),
title: ("Help"),
activeColor: CupertinoColors.systemRed,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.local_activity),
title: ("ProfileScreen"),
activeColor: CupertinoColors.systemIndigo,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.shop_cart),
title: ("Cart"),
activeColor: CupertinoColors.systemIndigo,
inactiveColor: CupertinoColors.systemGrey,
),
];
}
#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,
),
);
}
Also you can use navigation bottombar in certain screen by using navigator-functions instead of flutter navigator.push(); use following pushNewScreen
for more details checkout persistent_bottom_nav_bar#navigator-functions
pushNewScreen(
context,
screen: MainScreen(),
withNavBar: false, // OPTIONAL VALUE. True by default.
pageTransitionAnimation: PageTransitionAnimation.cupertino,
);
Yes I agree there are some package out there but doesn't provide full control over it
What you can do is Use Navigator and all your taps and you need to manage s separate navigation stack for all taps.
Here is a great article by Andrea Bizzotto
https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
I am new to flutter , Please help me to get out of this issue,
Issue -> After click any of the menu icon , color is not changing
While staring app , icon colours are setting correctly , Home icon is default , if I click Scan or settings icon green color is not setting for icon as well as text ,
I have tried activeIcon of BottomNavigationBarItem still not working
Here is my code,
class TabNavigationState extends State<ScaffoldTest> {
int currentTabIndex = 1;
var tabs = [Home(), Camera(), Settings()];
onTabbed(index) => {
setState(() {
currentTabIndex = index;
})
};
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
leading: IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: null),
centerTitle: false,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.info_outline,
color: Colors.white,
),
color: Colors.white,
onPressed: () => debugPrint("Icon tabbed")),
IconButton(
icon: Icon(
Icons.save,
color: Colors.white,
),
color: Colors.white,
onPressed: () => debugPrint("Icon tabbed")),
],
title: Text(
"Test",
style: TextStyle(color: Colors.white),
),
),
backgroundColor: Colors.white,
body: tabs[currentTabIndex],
floatingActionButton: FloatingActionButton(
onPressed: null,
child: IconButton(
icon: Icon(
Icons.camera,
color: Colors.white,
),
),
),
bottomNavigationBar: BottomNavigationBar(
// backgroundColor: Colors.blueAccent.shade100,
selectedItemColor: Colors.green,
unselectedItemColor: Colors.grey,
showSelectedLabels: true,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"Home",
textDirection: TextDirection.ltr,
)),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
title: Text(
"Scan",
textDirection: TextDirection.ltr,
)),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text(
"Settings",
textDirection: TextDirection.ltr,
))
],
onTap: onTabbed,
),
);
}
https://i.stack.imgur.com/aGJqG.png
BottomNavigationBar has attribute currentIndex to know which is current active tab. You need to set it in your onTabbed method like
int _selectedIndex = 0;
void onTabbed(int index) {
setState(() {
_selectedIndex = index;
...
});
....
}
// And use _selectedIndex in BottomNavigationBar
Widget build(BuildContext context) {
return Scaffold(
...
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
),
...
);
}
I've a bottomnavigation bar that has a color. When I clicked on the last button, the color change to white ...
The last button show some card i can swipe.
For that i use the code here : https://github.com/devefy/Flutter-Story-App-UI
i've tried to change return container() whith something else, but nothing was heplful.
here is my code
void _onItemTapped(int index) {
setState(() {
if (edifice != null) _selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.unEdifice.vocable),
backgroundColor: color_edifices,
),
body: Center(
child: edifice == null
? CircularProgressIndicator()
: _selectedIndex == 5
? SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: edifice.commentaires.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return Container(
);
},
),
)
],
),
],
),
)
: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: color_edifices,
icon: Icon(GaeoIcons.church, color: Colors.white),
title: Text('Edifice', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.location_on, color: Colors.white),
title: Text('Adresses', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.group, color: Colors.white),
title: Text('Responsables', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.truck, color: Colors.white),
title: Text('Distributions', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.group, color: Colors.white),
title: Text('Contacts', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.comment, color: Colors.white),
title: Text('Commentaires', style: buttonTextStyle),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}`
You can see what i mean with the pictures included
Thanks for your help
I have tried to simulate your case with Story App UI
please try to
1. add BottomNavigationBar 's backgroundColor
2. test with BottomNavigationBarType.fixed and fixedColor
also reference Flutter BottomNavigationBar Colors
code snippet
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.brown,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: Colors.white,
icon: Icon(Icons.access_time, color: Colors.white),
title: Text('Edifice', ),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm, color: Colors.white),
title: Text('Adresses', ),
),
],
)
Test result of Story App UI with BottomNavigationBar
In both a tabbar and nav bar, I would like the selected tab to have a different background to the rest of the bar.
For example: https://imgur.com/a/jxD8MTg
Is this possible in flutter?
If you are using stateful Widget, you could just set the state of the currentIndex in the on Tap method
#override
void initState() {
super.initState();
currentIndex = 0;
}
BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: currentIndex == 0 ? Colors.green : Colors.black,
title: Text('0'),
),
BottomNavigationBarItem(
backgroundColor: currentIndex == 1 ? Colors.green : Colors.black,
title: Text('1'),
),
],
currentIndex: currentIndex,
onTap: (int index) {
setState(() {
currentIndex = index;
});
_navigateToPage(index);
},
);
import 'package:flutter/material.dart';
class ChangeBottomNavBarTextColor extends StatefulWidget {
#override
ChangeBottomNavBarTextColorState createState() {
return new ChangeBottomNavBarTextColorState();
}
}
class ChangeBottomNavBarTextColorState
extends State<ChangeBottomNavBarTextColor> {
String text = 'Home';
var curIndex = 0;
_onTap(int index) {
setState(() {
curIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Change Bottom Nav Bar Text Color Example"),
),
body: Center(
child: Text(text,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
)),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.red,
currentIndex: curIndex,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text("Home", style: TextStyle(color: Colors.teal)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.favorite,
),
title: Text("Favorite", style: TextStyle(color: Colors.pink)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
title: Text("Profile", style: TextStyle(color: Colors.brown)),
),
BottomNavigationBarItem(
activeIcon: Icon(
Icons.info,
color: Colors.red,
),
icon: Icon(
Icons.settings,
),
title: Text("Settings", style: TextStyle(color: Colors.amber)),
),
],
onTap: _onTap,
),
);
}
}
You can use something like that. When you clicked, _onTap function will change currentIndex. Then selectedItemColor will define the color of the selected index. You can play with the colors whatever you want.