I am New to Flutter actually I am not a coder but I am trying to build an app that can do basic things like the sign-in page, sign up, user data showing to the screen, and also I can see each other profile from the app I Stuck in the Bottom Navigation bar here which I never thought that it would be hard to get through.
instead of giving up, I decided to google around and come up with different results (some of them are hard to understand and confusing). I am trying to build a navigation bar that routs to different pages with minimum memory usage (efficient code)
I am so confused and I don't know now what to do, please help another coder(if someone fixes this I am going to consider myself a coder, don't think too much )
@override
Widget build(BuildContext context) {
PageController _pageController = PageController();
final List<Widget> _tabs = [FeedPage(), ListingPage(), SettingPage()];
int _selectedIndex = 0;
void _onPageChanged(int index) {
setState(() { //Is something wrong with my setState?
_selectedIndex = index;
});
}
void _onItemTapped(int _selectedIndex) {
_pageController.jumpToPage(_selectedIndex);
}
return Scaffold(
body: PageView(
controller: _pageController,
children: _tabs,
onPageChanged: _onPageChanged, //Check it out
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex, //I use this
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
),
title: Text("List"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
title: Text("Profile"),
),
],
),
);
}
}
//is this the code bugged? or something wrong in my flutter IED or something I am confused
try this code below, insert this code just before the scaffold perntesis, also dont forget to insert the packacge.
bottomNavigationBar: CurvedNavigationBar(
color: Colors.black26,
backgroundColor: Color(0xFFFFC5C5),
buttonBackgroundColor: Colors.greenAccent,
height: 50.0,
animationCurve: Curves.bounceInOut,
items: <Widget>[
Icon(Icons.translate, size: 20, color: Colors.black),
Icon(Icons.translate, size: 20, color: Colors.black),
Icon(Icons.list, size: 20, color: Colors.black),
Icon(Icons.account_balance, size: 20,
color: Colors.black),
// Icon(Icons.camera, size: 20, color: Colors.black),
],
index: 2,
animationDuration: Duration(milliseconds: 400),
onTap: (index) {
debugPrint("Curent index is $index");
}
)
Okay I see you havent mentioned color in your icons so as page changes let us apply the same logic to avoid confusion.
So let us have a list of colors declared below final list of _tabs
List<Color> selectedColor = [Colors.grey[900],Colors.grey[900],Colors.grey[900]];
Now we have assign these to our icons as
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: selectedColor[0], //Add here
),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list,
color: selectedColor[1], //Add here
),
title: Text("List"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: selectedColor[2], //Add here
),
title: Text("Profile"),
),
],
Now due to this mentioned in the list all have a grey colour
void updateColor(int num){
//here I am again declaring it because when I select the other color the list should //always remain same for the effect you want
selectedColor = [Colors.grey[900],Colors.grey[900],Colors.grey[900]];
setState(() {
switch(num){
case 1 : selectedColor[0] = Colors.Red;
break;
case 2 : selectedColor[1] = Colors.Red;
break;
case 3 : selectedColor[2] = Colors.Red;
break;
}
});
}
Now what we will do is call this on your onChanged function or you can also mention it in onTap but I dont understand why you used both at the same time
I will use
void _onItemTapped(int _selectedIndex) {
setState(() { //Is something wrong with my setState?
_selectedIndex = index;
updateColor(_selectedIndex);
});
_pageController.jumpToPage(_selectedIndex);
}
You can simply change the colors in the bottom navigation bar as follows.
Change the main color of
color: Colors.orange,
Change the Background color
backgroundColor: Colors.white,
Change the Icon background-color
buttonBackgroundColor: Colors.orangeAccent,
Change the Icon Size
Icon(Icons.person, size: 30),
The sample code as follows
bottomNavigationBar: CurvedNavigationBar(
color: Colors.orange,
backgroundColor: Colors.white,
buttonBackgroundColor: Colors.orangeAccent,
items: <Widget>[
Icon(Icons.person, size: 30),
Icon(Icons.close, size: 30),
Icon(Icons.settings, size: 30),
],
onTap: (index) {
//Handle button tap
},
),
Hope this will fix your problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.