BottomNavigationBar color incorrectly change - flutter

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

Related

BottomNavigationBarItem selectedItemColor is not working

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,

How to put a list item in bottomnavigation using flutter?

I hope the my title is enough to understand my problem, How to put a list item in bottomnavigation using flutter? if not please refer in the picture below and code i provided.
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
backgroundColor: Colors.orangeAccent,
selectedItemColor: Colors.white,
unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
onTap: (value) {
// Respond to item press.
setState(() => _currentIndex = value);
},
items: [
BottomNavigationBarItem(
title: Text('Clothes'),
icon: Icon(Icons.design_services_rounded),
),
BottomNavigationBarItem(
title: Text('Colors'),
icon: Icon(Icons.colorize_rounded),
),
BottomNavigationBarItem(
title: Text('Ideas'),
icon: Icon(Icons.lightbulb_outline_rounded),
),
BottomNavigationBarItem(
title: Text('Profile'),
icon: Icon(Icons.face_rounded),
),
],
),
);
}
}
if i clicked the Clothes , this will happen.
Edit 1:
How this is done is as follows:
// Keep this outside your Widget as it is a constant.
final List<Widget> _widgets = <Widget>[
ClothesPage(),
ColorsPage(),
IdeasPage(),
ProfilePage(),
];
return Scaffold(
// This body is new.
body: _widgets[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
backgroundColor: Colors.orangeAccent,
selectedItemColor: Colors.white,
unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
onTap: (value) {
_currentIndex = value;
showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_widgets[_currentIndex],
SizedBox(
// Use whatever height you desire.
height: 90,
),
],
);
},
);
},
items: [
BottomNavigationBarItem(
title: Text('Clothes'),
icon: Icon(Icons.design_services_rounded),
),
BottomNavigationBarItem(
title: Text('Colors'),
icon: Icon(Icons.colorize_rounded),
),
BottomNavigationBarItem(
title: Text('Ideas'),
icon: Icon(Icons.lightbulb_outline_rounded),
),
BottomNavigationBarItem(
title: Text('Profile'),
icon: Icon(Icons.face_rounded),
),
],
),
);
// I have put a card here, you can put any other Widget for the same.
// Do the same for others.
class ProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Text(
"Profile",
),
),
);
}
}
Now, I hope this is what you expect to do via the Bottom Navigation Bar.

Make appbar transparent this below case

Guys!
I am trying to make this AppBar transparent. Because behind it will have a background but so far I have not had success. I thank you all thank you!
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: show(index),
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){},
)
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}
enter image description here
Appbar has shadow by default and if u want transparent appbar, also you need to add elevation: 0 to AppBar for remove shadow.
Get hint from following code (source https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'mrflutter.com',
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
),
Positioned(
child: AppBar(
title: Text("Transparent AppBar"),
backgroundColor: Colors.transparent,
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
onPressed: () {},
tooltip: 'Share',
),
],
),
)
],
),
);
}
try to wrap both AppBar and your Body part in stack and make AppBar Trasparent so you will get your desired Output
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
show(index),
Wrap(
children: <Widget>[
AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
],
),
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}

Flutter - after clicking bottom navigation menu icon => selected icon color and text color not changing

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,
),
...
);
}

How to save index of PageView?

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.