I have an application that contains a bottom navigation bar with three buttons. If I were to navigate to the second page of the navigation bar I am presented with a list of more navigation buttons. The pages that these buttons navigate to do not contain the bottom navigation bar. On these pages I have a back button that I would like to navigate back to the bottom navigation page 2.
I have tried:
() => Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (BuildContext context) => new MyApp()), (Route route) => route == null),),
and:
() => Navigator.of(context).pop(),
When I use the first snippet of code, it take be back to the first page of the navigation bar and when I use second snippet of code, all I get is a black screen.
main.dart
import 'package:flutter/material.dart';
import './pages/page1.dart';
import './pages/page2.dart';
import './pages/page3.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
int _selectedPage = 0;
final _pageOptions = [
Page1(),
Page2(),
Page3(),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'title',
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.blue,
accentColor: Colors.blueAccent,
backgroundColor: Colors.black12,
textTheme: TextTheme(
title: TextStyle(fontSize: 24.0, height: 1.0, color: Theme.of(context).primaryColor),
subtitle: TextStyle(fontSize: 18.0,height: 1.0, color: Theme.of(context).primaryColor),
body1: TextStyle(fontSize: 12.0, height: 1.1),
),
),
home: Scaffold(
appBar: AppBar(title: Center(child: Text("title", textAlign: TextAlign.center))),
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},
items:[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Page 1'),
),
BottomNavigationBarItem(
icon: Icon(Icons.info),
title: Text('Page 2'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Page 3'),
),
]
),
),
);
}
}
Now from page 2, I can navigate to page A. When I am on page A and I want to navigate back to Page 2. However I am only able to navigate back to Page 1.
Page A:
import 'package:flutter/material.dart';
import '../../main.dart';
class PageA extends StatelessWidget {
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
double ratio = height/width;
return Scaffold(
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.chevron_left),
iconSize: (0.06 * ratio) * width,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onPressed: () => Navigator.of(context).pop(),
);
},
),
title: Text("Page A"),
),
body: Container(
decoration: BoxDecoration(color: Theme.of(context).accentColor),
));
}
}
How do I pass in the _selectedPage / index when navigation back to the previous page?
