Return to the previous bottom nav bar [Flutter]

Question

Hi what Im trying to do is when you press the certain tab in this case Wallet and when you press back it should return you to previous tab but instead it exits the app what is my best approach to solve this issue. I tried experimenting with on WillPopScope but to no avail.

The main code where tabs are:

class Test extends StatefulWidget {
  static const route = '/test';
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int _currentIndex = 0;

  final _ruta1 = GlobalKey<NavigatorState>();
  final _ruta2 = GlobalKey<NavigatorState>();
  final _ruta3 = GlobalKey<NavigatorState>();

  @override
  void initState() {
    super.initState();
  }

  bool canback = false;

  Future<bool> _onWillPop() async {
    if (canback == true) {
      SystemChannels.platform.invokeMethod('SystemNavigator.pop');
    } else {
      setState(() {
        _currentIndex = 0;
      });
    }

    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        canback = false;
      });
    });
    canback = true;

    return canback;
  }

  @override
  Widget build(BuildContext context) {
    print('building');
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text(
          'Same tab',
        ),
      ),
      body: WillPopScope(
        onWillPop: _onWillPop,
        child: Container(
          color: Colors.white,
          child: IndexedStack(
            index: _currentIndex,
            children: <Widget>[
              Navigator(
                key: _ruta1,
                onGenerateRoute: (route) => MaterialPageRoute(
                  settings: route,
                  builder: (context) => Ruta1(),
                ),
              ),
              Navigator(
                key: _ruta2,
                onGenerateRoute: (route) => MaterialPageRoute(
                  settings: route,
                  builder: (context) => Ruta2(),
                ),
              ),
              Navigator(
                key: _ruta3,
                onGenerateRoute: (route) => MaterialPageRoute(
                  settings: route,
                  builder: (context) => Ruta3(),
                ),
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        clipBehavior: Clip.antiAlias,
        child: BottomNavigationBar(
          backgroundColor: Colors.white,
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.redAccent,
          unselectedItemColor: Colors.grey,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.date_range), label: 'Statistics'),
            BottomNavigationBarItem(
                icon: Icon(Icons.wallet_giftcard), label: 'Wallet'),
          ],
        ),
      ),
    );
  }
}

Currently they all have the same design:

import 'package:flutter/material.dart';

class Ruta1 extends StatefulWidget {
  const Ruta1({Key? key}) : super(key: key);

  static const route = '/test/ruta1';

  @override
  _Ruta1State createState() => _Ruta1State();
}

class _Ruta1State extends State<Ruta1> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Ruta1 text'),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

What is the best aproach to solve this problem, I have seen that when you use TabBar menu its much simpler but in my case I need bottom navigation Thanks in advance

Return to the previous bottom nav bar [Flutter]

0 Answers0