Flutter app back button event not redirecting to back page

Question

I am developing a flutter android app. It have three screens. Page 1, Page 2, Page 3. When i entering Page 3 from Page 2. if i click phone back button it want to got to page 2. But it is redirecting to page 1. I tried after got the reference from catch Android back button event on Flutter

I tried WillPopScope . It is not entering in onWillPop .

How to solve the problem. My code is shown below.

page 1

    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        home: Scaffold(
            appBar: new AppBar(),
            body: MyAppPage()
        ),
        );
    }
    }

    class MyAppPage extends StatefulWidget{
    MyAppPage({Key key,}):super(key:key);

    @override
    _MyAppPageState createState()=> new _MyAppPageState();
    }

    class _MyAppPageState extends State<MyAppPage>{

    @override
    Widget build(BuildContext context){
        return new Scaffold(
        body:RaisedButton(onPressed:(){ Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));},
        child: new Text("got to page 1"),)
        );
    }
    }

page 2

    class SecondScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        home: Scaffold(
            appBar: new AppBar(),
            body: SecondPage()
        ),
        );
    }
    }

    class SecondPage extends StatefulWidget{
    SecondPage({Key key,}):super(key:key);
    @override
    SecondPageState createState()=> new SecondPageState();
    }

    class SecondPageState extends State<SecondPage>{
    @override
    Widget build(BuildContext context){
        return new Scaffold(
            body:Column(
            children: <Widget>[
                new Center(
                child: new Text("Page 2"),
                ),
                RaisedButton(onPressed:(){ Navigator.push(context, MaterialPageRoute(builder: (context) => ThirdScreen()));},
                child: new Text("go to third Page 3"),)
            ],
            )
        );
    }
    }

page 3

    class ThirdScreen extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        home: Scaffold(
            appBar: new AppBar(),
            body: ThirdPage()
        ),
        );
    }
    }

    class ThirdPage extends StatefulWidget{
    ThirdPage({Key key,}):super(key:key);
    @override
    ThirdPageState createState()=> new ThirdPageState();
    }

    class ThirdPageState extends State<ThirdPage>{
    @override
    Widget build(BuildContext context){
        return new WillPopScope(
        child: new Scaffold(
            body:  new Center(
            child: new Text('PAGE 3'),
            ),
        ),
        onWillPop: (){
            debugPrint("onWillPop");
            return new Future(() => false);
        },
        );
    }
    }

Feu · Accepted Answer · 2018-12-17 11:36:33Z

3

You kinda got confused with the Screen and Pages you created. You actually have more Widgets than you need.

This is what you probably want to do.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyAppPage());
  }
}

class MyAppPage extends StatefulWidget {
  @override
  _MyAppPageState createState() => _MyAppPageState();
}

class _MyAppPageState extends State<MyAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 1")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(child: Text("got to page 1")),
          RaisedButton(
            child: Text("Go to Page 2"),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
            },
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 2")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(
            child: Text("I'm in Page 2"),
          ),
          RaisedButton(
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ThirdPage()));
            },
            child: Text("go to third Page 3"),
          )
        ],
      )
    );
  }
}

class ThirdPage extends StatefulWidget {
  @override
  _ThirdPageState createState() => _ThirdPageState();
}

class _ThirdPageState extends State<ThirdPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 3")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(child: Text('PAGE 3')),
          RaisedButton(
            child: Text("aditional back button"),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  }
}

answered Dec 17, 2018 at 11:36

Feu

5,8291 gold badge38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Over a year ago

Ya I got the answer. I avoid stateless and use stateful. Thanks

Feu Over a year ago

Don't avoid Stateless, it's useful> :) However, if it's a page with a Scaffold, you need that state - and keep the ratio one page x one scaffold, you were nesting many in the same page.

Joe Over a year ago

But I want to write the code in different files. For example I write stateless in page1, Page 2 and page 3 I written in different dart file without stateless. Is it fine?

Feu Over a year ago

you can write all that in multiple files regardless of it being stateless ou stateful! 👍

CularBytes Over a year ago

Any suggestions if you already have such a simple setup and the back button is still not working? Even using the WillPopScope and just putting ` onWillPop: () async => Navigator.of(context).pop()` in there doesn't work?

iPatel · Accepted Answer · 2018-12-16 08:34:18Z

2

On your 3rd page, try to use

 onWillPop: () {
    Navigator.of(context).pop();
  },

answered Dec 16, 2018 at 8:34

iPatel

47.3k17 gold badges117 silver badges142 bronze badges

1 Comment

Joe Over a year ago

I Tried this one but not working. It is not entering in onWillPop method.

Mina Farid · Accepted Answer · 2020-09-25 22:01:54Z

0

for my case, I should upgrade the flutter master branch to the latest code.

flutter channel master
flutter upgrade --force
flutter doctor -v

answered Sep 25, 2020 at 22:01

Mina Farid

6,0476 gold badges47 silver badges51 bronze badges

Collectives™ on Stack Overflow

Flutter app back button event not redirecting to back page

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related