I currently working on a project need to build with Cupertino widget. Everything is fine until I trying not to display bottom navigation bar at next page, but the bottom navigation bar still bring forward from previous page. Below is my example code.
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person), label: 'Person'),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.mail), label: 'Mail'),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.flag), label: 'Flag'),
],
),
tabBuilder: (context, index) {
return CupertinoTabView(
routes: {
'p2': (context) => PageTwo(),
},
builder: (context) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'p2');
},
child: Text('Next Page'),
),
],
),
));
},
);
},
);
}
}
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.white,
child: Column(children: [
Text('Page 2'),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back'),
),
]),
),
);
}
}
Found the solutions.
Just repace
Navigator.pushNamed(context,'p2');
to
Navigator.of(context, rootNavigator: true).pushNamed('p2');
Remove the CupertinoTabView from tabBuilder if not necessary to use it
tabBuilder: (context, index) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: Center(
child: Column(
children: [
SizedBox(
height: 50.0,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, 'p2');
},
child: Text('Next Page'),
),
],
),
),
);
},
imprtant: must set routes for class CupertinoApp