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?
I use shared_preferences to keep track the current page displayed on my app. This should also help keep track the currently displayed page on web when the page is refreshed as web treats a page refresh as an app restart.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.