CODEWITHSUNDEEP
flutterexitback
wahyu
wahyu

Reputation: 2425

How to permit back button to exit app in flutter

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),
      ),
    );
  }
}

Upvotes: 0

Views: 7952

Answers (3)

Constantin N.
Constantin N.

Reputation: 2839

Hello You can Exit you app by making this:

  1. Insert WillPopScope widget

    WillPopScope( onWillPop: () => onWillPop(context), child: //Other widgets here)

  2. then create a method to handle onWillPop

    onWillPop(context) async { SystemChannels.platform.invokeMethod('SystemNavigator.pop'); return false; }

Upvotes: 0

Zakir
Zakir

Reputation: 1565

When you go to Home screen from Login scree use Navigator.of(context).pushReplacement(newRoute) instead of Navigator.of(context).push(newRoute). It will replace the Login route with Home route in navigator stack, so when you press back button there will be noting in the Navigator stack below Home screen, so app will close.

Upvotes: 2

Hashir Baig
Hashir Baig

Reputation: 2361

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.

Upvotes: 3

Related Questions