I used IndexedStack
with BottomNavigationBar
to keep state of Screens/pages/Widget.
But now if I navigate to second or third page from home tab then I'm not able to get the current state of page. Basically I want to dispose
the video controller but when I changed the tab, onDispose()
method is not called in my VideoPlayer
class.
Code to implement bottom tab bar
int _selectedIndex = 0;
final _classesScreen = GlobalKey<NavigatorState>();
final _programScreen = GlobalKey<NavigatorState>();
final _scheduleScreen = GlobalKey<NavigatorState>();
final _profileScreen = GlobalKey<NavigatorState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: <Widget>[
Navigator(
key: _classesScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => FitClasses(,
),
),
),
Navigator(
key: _programScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => Programs(),
),
),
Navigator(
key: _scheduleScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => Schedule(),
),
),
Navigator(
key: _profileScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => Profile(),
),
),
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.white,
splashColor: Color(0xffFFED31),
unselectedWidgetColor: Colors.white,
primaryColor: Color(0xffFFED31),
backgroundColor: Color(0xff3A3A3A),
textTheme: Theme.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.white))),
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 0
? SvgPicture.asset(AppConfig.classes,
color: Color(0xffFFED31), semanticsLabel: 'classes')
: SvgPicture.asset(AppConfig.classes,
color: Colors.white, semanticsLabel: 'classes')),
title: Text(
'Classes',
style: TextStyle(fontSize: 10),
),
),
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 1
? SvgPicture.asset(AppConfig.programs,
color: Color(0xffFFED31), semanticsLabel: 'programs')
: SvgPicture.asset(AppConfig.programs,
color: Colors.white, semanticsLabel: 'programs')),
title: Text(
'Programs',
style: TextStyle(fontSize: 10),
),
),
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 2
? SvgPicture.asset(AppConfig.schedule,
color: Color(0xffFFED31), semanticsLabel: 'schedule')
: SvgPicture.asset(AppConfig.schedule,
color: Colors.white, semanticsLabel: 'schedule')),
title: Text(
'Schedule',
style: TextStyle(fontSize: 10),
),
),
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 3
? SvgPicture.asset(AppConfig.profileIcon,
color: Color(0xffFFED31), semanticsLabel: 'profile')
: SvgPicture.asset(AppConfig.profileIcon,
color: Colors.white, semanticsLabel: 'profile')),
title: Text(
'Profile',
style: TextStyle(fontSize: 10),
),
),
],
currentIndex: _selectedIndex,
onTap: (val) => _onTap(val, context),
type: BottomNavigationBarType.fixed,
backgroundColor: Color(0xff3A3A3A),
/*selectedItemColor: Color(0xffFFED31),
selectedIconTheme: IconThemeData(color: Color(0xffFFED31)),
unselectedIconTheme: IconThemeData(color: Color(0xffFFFFFF)),*/
selectedLabelStyle: TextStyle(fontSize: 10, color: Color(0xffFFED31)),
unselectedLabelStyle:
TextStyle(fontSize: 10, color: Color(0xffFFFFFF)),
),
),
);
}
void _onTap(int val, BuildContext context) {
if (_selectedIndex == val) {
switch (val) {
case 0:
_classesScreen.currentState.popUntil((route) => route.isFirst);
break;
case 1:
_programScreen.currentState.popUntil((route) => route.isFirst);
break;
case 2:
_scheduleScreen.currentState.popUntil((route) => route.isFirst);
break;
case 3:
_profileScreen.currentState.popUntil((route) => route.isFirst);
break;
default:
}
} else {
if (mounted) {
setState(() {
_selectedIndex = val;
});
}
}
}
Please watch this video to understanding the my point
User contributions licensed under CC BY-SA 3.0