flutter navigate back to selected page

Question

I have a application with contains a bottom navigation that when the app loads it defaults to the first page. If I were to click onto the second page and then from the second page, I navigate to another separate page that is not linked to the bottom navigation bar. When I click the back button in the Appbar in this page, I am take to page one again instead of page 2.

Navigation Controller:

import 'package:flutter/material.dart';
import '../pages/TaxCalcPage.dart';
import '../pages/TaxInfoPage.dart';
import '../pages/SettingsPage.dart';

class BottomNavigationBarController extends StatefulWidget {
  @override
  _BottomNavigationBarControllerState createState() =>
      _BottomNavigationBarControllerState();
}

class _BottomNavigationBarControllerState extends State<BottomNavigationBarController> {
  final List<Widget> pages = [
    TaxCalcPage(
      key: PageStorageKey('Page1'),
    ),
    TaxInfoPage(
      key: PageStorageKey('Page2'),
    ),
    SettingsPage(
      key: PageStorageKey('Page3'),
    )
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  int _selectedIndex = 0;

  Widget _bottomNavigationBar(int selectedIndex) => BottomNavigationBar(
        onTap: (int index) => setState(() => _selectedIndex = index),
        currentIndex: selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text('Tax Calculators')),
          BottomNavigationBarItem(
              icon: Icon(Icons.info), title: Text('Tax Information')),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), title: Text('Settings')),
        ],
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
      body: PageStorage(
        child: pages[_selectedIndex],
        bucket: bucket,
      ),
    );
  }
}

Page:

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).pushAndRemoveUntil(MaterialPageRoute(builder: (BuildContext context) => BottomNavigationBarController()), (Route route) => route == null),
        );
      },
    ),

So when I navigate back using the icon in the AppBar. I will take me to page 1 instead of Page 2

afcode afcode · Accepted Answer · 2019-08-05T18:45:47

Using Navigator.of(context).pop(); should bring you back to the previous Screen with the correct State. For a better understanding of it check out this article: https://medium.com/flutter-community/flutter-push-pop-push-1bb718b13c31

IF this does not work you have to save the current index of your BottomNavigationBar and pass it back to your Navigation Controller once going back to it.

flutter navigate back to selected page

1 Answers