问题
Here is my bottom_bar screen. I want to change the bottom navigation menu from another screen button click. How can I resolve this problem?. is there any option that can navigate bottom_navigation from another class. I didn't get any accurate answers through search. [N.B: I am totally new in flutter. Please forgive me if there is any type of misconception ]
@override
Widget build(BuildContext context) {
final themeNotifier = Provider.of<ThemeNotifier>(context);
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('JoyList'),
leading: IconButton(
icon: Image( image: new AssetImage("images/Logo.png"),
width: 200,
height: 200,
color: null,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
tooltip: 'Show Snackbar',
onPressed: () {
// scaffoldKey.currentState.showSnackBar(snackBar);
},
),
actions: <Widget>[
IconButton(
icon: const ImageIcon( AssetImage("images/ic_notification_default.png")),
tooltip: 'Show Snackbar',
onPressed: () {
// scaffoldKey.currentState.showSnackBar(snackBar);
},
),
FutureBuilder(
future: _apiProvider.getUserImageUrl(),
builder: (context, AsyncSnapshot<String> projectSnap) {
if(projectSnap.hasData){
var url = projectSnap.data;
return IconButton(
icon: Center(
child: new Container(
width: 30,
height: 30,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'$url'
)
)
),
),
),
onPressed: _modalBottomSheetMenu,
);
}else{
return Text("Nil");
}
}
)
],
),
body: CustomNavigator(
navigatorKey: navigatorKey,
home: Center(
child: _widgetOptions.elementAt(selectedIndex),
),
//Specify your page route [PageRoutes.materialPageRoute] or [PageRoutes.cupertinoPageRoute]
pageRoute: PageRoutes.cupertinoPageRoute,
),
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Theme.of(context).bottomAppBarColor,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))),
// sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: selectedIndex,
items: [
BottomNavigationBarItem(
icon: selectedIndex==0? new ImageIcon( AssetImage('images/ic_home_selected.png')):new ImageIcon( AssetImage('images/ic_home_default.png')),
title: Text(''),
),
BottomNavigationBarItem(
icon: selectedIndex==1? new ImageIcon( AssetImage('images/ic_list_selected.png')):new ImageIcon( AssetImage('images/ic_list_default.png')),
title: Text(''),
),
BottomNavigationBarItem(
icon: ImageIcon( AssetImage("images/ic_additems.png")),
title: Text(''),
),
BottomNavigationBarItem(
icon: ImageIcon( AssetImage("images/ic_search.png")),
title: Text(''),
),
BottomNavigationBarItem(
icon: selectedIndex==4? new ImageIcon( AssetImage('images/ic_notification_selected.png')):new ImageIcon( AssetImage('images/ic_notification_default.png')),
title: Text(''),
),
BottomNavigationBarItem(
// icon: ImageIcon( AssetImage("images/ic_friends_selected.png")),
icon: ImageIcon( AssetImage("images/ic_friends_selected.png")),
title: Text(''),
),
],
showSelectedLabels: false,
unselectedItemColor: Theme.of(context).iconTheme.color,
showUnselectedLabels: false,
selectedItemColor: HexColor("1CD0A8"),
onTap: _onItemTapped,
),
)
);
}
I want to change bottom bar selected index from another screen from here on Tap.
child: GestureDetector(
child: FutureBuilder(
future: _getUser(),
builder: (context, AsyncSnapshot<dynamic> projectSnap) {
if(projectSnap.hasData){
user = projectSnap.data;
var url = getProfileImageBaseUrl()+ user.profilePicture;
return Column(
children: <Widget>[
Container(
width: 170,
height: 170,
decoration: new BoxDecoration(
color: Theme.of(context).cardColor,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'$url'
)
)
),
),
Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(user.fullName+"'s List",style: TextStyle(
color: Theme.of(context).textTheme.caption.color,
fontSize: 26
),),
),
)
],
);
}else{
return Text("Nil");
}
}
),
onTap: (){
print("On tap called");
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => FriendsPage()));
},
)
回答1:
You can use MobX for this,
You need to wrap your BottomNavigationBar with Observer and also declare your selectedIndex in MobX store.
Once you have selectedIndex in your MobX store you can access it from anywere in app using Provider.
来源：https://stackoverflow.com/questions/63071770/change-bottom-navigation-current-index-and-update-setstate-from-another-screen