How to permit back button to exit app in flutter

Question

I am currently using WillPopScope to prevent back button after I watch tutorial in youtube and read some answers in stack overflow, the route is like this.. I have login screen and home screen.. when I am in home screen, when I click back button from my phone I want to close my app, I have tried using WillPopScope but when I click back button, it always navigates me to my login screen, is there a way so that my app will exit when I click back button? here is my code this is login screen

class _LoginScreenState extends State<LoginScreen> {
postData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setInt('username', _username.text);
  Navigator.push(context,
              new MaterialPageRoute(
                  builder: (BuildContext context) =>
                      new BottomTab()));
}
@override
  Widget build(BuildContext context) {
    return Column(
             children:<Widget>[
               TextFormField(
                 controller: _username),
               FlatButton(
                 child: Text("Login"),
                 onPressed: () {
                    postData(_username.text);}),];}
}

and this is my Tab

class _BottomTab extends State<BottomTab> {
Future<bool> _back() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            content: Text('exit?'),
            actions: <Widget>[
              FlatButton(
                child: Text('ok'),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
FlatButton(
                child: Text('no'),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
            ],
          );
        });
  }
  int _selectedIndex = 0;

  _onTap(int index) {
    setState(() => _myindex = index);
  }

  final List<Widget> pages = [
    HomeScreen(),
    ProfileScreen(), 
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  Widget _myNavigation(int selectedIndex) => BottomNavigationBar(
        onTap: _onTap,
        currentIndex: myindex,
        type: BottomNavigationBarType.fixed,
        items: const <MyTab>[
          MyTab(icon: Icon(Icons.home), title: Text('Home')),
          MyTab(icon: Icon(Icons.person), title: Text('Profile')),
        ],
      );

  @override
  Widget build(BuildContext context) {
    return FutureProvider<String>(
      create: (context) async {
        final prefs = await SharedPreferences.getInstance();
        return prefs.getString("username");
      },
      child: Scaffold(
        key: scaffoldKey,
        body: WillPopScope(
          onWillPop: back,
          child: PageStorage(
            child: pages[_selectedIndex],
            bucket: bucket,
          ),
        ),
        bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
      ),
    );
  }
}

Hashir Baig Hashir Baig · Accepted Answer · 2020-04-14T08:03:43

The Login screen is in the Navigator stack, due to which when you try to pop from BottomTab screen, the Login screen appears again. Instead of:

Navigator.push(context,
              new MaterialPageRoute(
                  builder: (BuildContext context) =>
                      new BottomTab()));

Do something like this:

Navigator.pushAndRemoveUntil(
      context,
      MaterialPageRoute(builder: (BuildContext context) => new BottomTab()),
      (Route<dynamic> route) => false
);

Navigator.pushAndRemoveUntil will push ButtomTab into navigator and pop all the routes in stack so far.

How to permit back button to exit app in flutter

3 Answers