Flutter curved navigation bar does not switch between pages - flutter

Question

I have encountered a problem which I cannot move between pages when I click on the icons, but I am setting the default page is the home page and when the application is running it only appears and I cannot move to other pages using the navigation bar.
Navigation Bar File:
class NavigationBar extends StatefulWidget {
#override
_NavigationBarState createState() => _NavigationBarState();
}
class _NavigationBarState extends State<NavigationBar> {
int pageIndex = 0;
final Search _search = Search();
final UserNoti _userNoti = UserNoti();
final HomePage _homePage = HomePage();
final MyProfile _myProfile = MyProfile();
final MyMajor _mymajor = MyMajor();
Widget _showPage = new HomePage();
Widget _pageChooser(int page)
{
switch (page)
{
case 0:
return _search;
break;
case 1:
return _userNoti;
break;
case 2:
return _homePage;
break;
case 3:
return _myProfile;
break;
case 4:
return _mymajor;
break;
default:
return _homePage;
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
decoration: new BoxDecoration(
// borderRadius: BorderRadius.circular(28.0),
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.deepPurple, Colors.purple]),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 25.0, // soften the shadow
spreadRadius: -10.0, //extend the shadow
)
],
),
child: CurvedNavigationBar(
index: 2,
color: Color.fromRGBO(58, 66, 86, 1.0),
buttonBackgroundColor: Colors.purple.withOpacity(0.6),
backgroundColor: Colors.transparent,
animationDuration: Duration(milliseconds: 200),
animationCurve: Curves.bounceInOut,
items: <Widget>[
Icon(Icons.search, size: 32, color: Colors.white,),
Icon(Icons.notifications_active, size: 32, color: Colors.white,),
Icon(Icons.home, size: 40, color: Colors.white,),
Icon(Icons.chat, size: 32, color: Colors.white,),
Icon(Icons.school, size: 32, color: Colors.white,),
],
onTap: (int tappedPage){
_showPage = _pageChooser(tappedPage);
},),
),
body: Container(
color: Colors.transparent,
child: Center(
child: _showPage,
),
));
}
}
Now I will put one code for one of those pages for example User Notification Page:
class UserNoti extends StatefulWidget {
final String myuid,majname,uniname;
UserNoti({Key key, this.myuid,this.majname,this.uniname}) : super(key: key);
#override
_UserNotiState createState() => _UserNotiState();
}
class _UserNotiState extends State<UserNoti> {
String myapplang = null;
var my_uid;
var myDoc;
bool loading = false;
#override
void initState() {
super.initState();
checkLang();
}
#override
Widget build(BuildContext context) {
return loading
? LoadingMain()
: Directionality(
textDirection: myapplang == 'ar' ? TextDirection.rtl : TextDirection.ltr,
child: Scaffold(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
appBar: GradientAppBar(
backgroundColorStart: Colors.deepPurple,
backgroundColorEnd: Colors.purple,
title: Text(
myapplang == 'ar' ? "الإشعارات" : "Notifications" ,
style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,fontFamily: myapplang == 'ar' ? 'Tajawal' : 'BalooDa2' ),),
),
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 30.0,),
Container(
width: MediaQuery.of(context).size.width*0.85,
child: Stack(
children: <Widget>[
StreamBuilder(
stream: Firestore.instance.collection('users').document(myDoc).collection('Notifications').orderBy('date',descending: true).snapshots(),
builder: (context, snapshot){
if(!snapshot.hasData)
{
const Text('Loading...');
}
else{
return ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index)
{
DocumentSnapshot mypost = snapshot.data.documents[index];
return Stack(
children: <Widget>[
FadeAnimation(0.2,Column(
children: <Widget>[
Container(
decoration: BoxDecoration(borderRadius:
BorderRadius.circular(15.0),color: Color.fromRGBO(64, 75, 96, .9),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 30.0, // soften the shadow
spreadRadius: -25.0, //extend the shadow
)
],),
child:InkWell(
onTap: () {
// setState(() => loading = true);
if(mypost['type'] == 'comment'){
if(mypost['location'] == 'Majors'){
Firestore.instance
.document('/Majors/${widget.majname}/Posts/${mypost['pdoc']}')
.get()
.then((val) {
if(val.data['pid'] != null && val.data['text'] != null && val.data['uid'] != null && val.data['uimg'] != null && val.data['uname'] != null && val.data['uname'] != null)
{
Navigator.push(context, new MaterialPageRoute(builder: (context) => new Comments(pid: val.data['pid'], text: val.data['text'],img: val.data['img'],uid: val.data['uid'], uimg: val.data['uimg'],uname: val.data['uname'],majname: widget.majname,pdoc:mypost['pdoc'] )));
}
else {
showWraning(context,myapplang == 'ar' ? "حدثت مشكلة، قد يكون الإشعار محذوف أو مشكلة بالإنترنت، حاول لاحقًا." : "There is a problem, maybe notification has been deleted or problem with internet connection, try again later.");
}
/*
*/
}).catchError((e) {
print(e);
});
}
else {
Firestore.instance
.document('/Universities/${widget.uniname}/Posts/${mypost['pdoc']}')
.get()
.then((val) {
if(val.data['pid'] != null && val.data['text'] != null && val.data['uid'] != null && val.data['uimg'] != null && val.data['uname'] != null && val.data['uname'] != null)
{
Navigator.push(context, new MaterialPageRoute(builder: (context) => new U_Comments(pid: val.data['pid'], text: val.data['text'],img: val.data['img'],uid: val.data['uid'], uimg: val.data['uimg'],uname: val.data['uname'],uniname: widget.uniname,pdoc:mypost['pdoc'] )));
}
else {
showWraning(context,myapplang == 'ar' ? "حدثت مشكلة، قد يكون الإشعار محذوف أو مشكلة بالإنترنت، حاول لاحقًا." : "There is a problem, maybe notification has been deleted or problem with internet connection, try again later.");
}
/*
*/
}).catchError((e) {
print(e);
});
}
}
else {
print('not comment!');
}
},
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: ClipRRect(
borderRadius: BorderRadius.circular(35.0),
child: Icon(Icons.insert_comment,color: Colors.deepPurple,size: 40,),
),
title: Column(
children: <Widget>[
Text(
"${mypost['text']}",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,fontFamily: 'BalooDa2'),
textAlign: TextAlign.left,
),
SizedBox(height: 10.0,),
],
),
// subtitle: Text("Intermediate", style: TextStyle(color: Colors.white)),
trailing:
Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0)),
),
),
SizedBox(height: 20.0,),
],
),),
],
);
}
);
}
return Container(
height: 0.0,
width: 0.0,
);
},
),
],
),
),
],
),
],
),
),
);
}
I removed a few codes that had no need.
Note when running the application the active page is Homepage()

Answer 1

Right now you are setting your _showPage variable with a new page, but not in a way that will force your app to re-render the widget tree. Try using SetState in your tap function to do this.
onTap: (int tappedPage){
setState(() {
_showPage = _pageChooser(tappedPage);
});
}),