简体   繁体   中英

Flutter pass bottom navigation bar selected index when navigating back to page with bottom nav bar

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM