How to handle back button of android in flutter - flutter

Question

I have navigate from one page to another page like from a button which is on the page
1st Page <---> 2nd Page <---> 3rd Page <---> 4th Page
If i am on the any page after clicking on the back button of android i want to navigate to the homepage instead of going to the previous page.
Like if i am on page 2 if i press back button i go to the page 1 but i want to pop all the elements on the stack and go to the main home page same for all.
Future<bool> pushPage(BuildContext context) {
// return Navigator.of(context).pop(true);
return Navigator.of(context).pushNamedAndRemoveUntil('/quiz2',
ModalRoute.withName("/landingPage"));
}
class _Quiz1State extends State<Quiz1> {
bool hasSolved = false;
int solvedOption = 0;
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
pushPage(context);
return false;
},
child: Scaffold(
body: Stack(
alignment: Alignment.topCenter,
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Color(0xffBD00FF),
Color(0xffF1509E),
],
),
),
),
mainQuiz(),
Container(
child: uiElements(context),
margin: EdgeInsets.only(top: 16),
),
],
),
),
);
}
mainquiz() function is the 2nd Page Function

Answer 1

We know that Navigator.pop() removes to topmost page available on the stack. There is another function named Navigator.popUntil() which will keep on popping out the pages from the stack until the desired page is reached.
For that first (If you have not done this yet) you need to give names to all your pages. These will act like an ID card for the page when you reference them in you functions. For that on the topmost part of your tree where the widget MaterialApp is located, do like this :
MaterialApp(
home: new Screen1(),
routes: <String, WidgetBuilder> {
'/screen1': (BuildContext context) => new Screen1(),
'/screen2' : (BuildContext context) => new Screen2(),
'/screen3' : (BuildContext context) => new Screen3(),
'/screen4' : (BuildContext context) => new Screen4()
},
)
Basically what you do here is you pre-define the names for all the routes you will be taking in your app.
Now say the above example's navigation works like this :
Screen1 -> Screen2 -> Screen3 -> Screen4
Now say I am at Screen4() ..... then my current stack will be [Screen4,Screen3,Screen2,Screen1] .....(latest first, oldest last), and on hitting the back button I need to directly pop out to Screen1().... (Home page in your case). Then instead of out simple Navtigator.pop() I will do something like this :
Navigator.popUntil(context, ModalRoute.withName('/screen1'));
This will keep popping out the widgets until it reaches screen1.
Hope this solves your porblem.
NOTE:
Once you have preDefined all your routes at the start, instead of calling Navigator.push(context,MaterialPageRoute((context) => Screen1());
You can do this :
Navigator.pushNamed(context, '/screen1');
Edit :
Say if your HomePage was not already present in stack and you want to show it after popping out all the screens. You can do :
Navigator.of(context).pushNamedAndRemoveUntil('/homepage', (Route<dynamic> route) => false);
This will add Homepage() after removing all the other screens present in the stack. [" (Route route) => false " will pop out all the screens from the stack. ].
Then if you want to pop out the screen only till a given screen is reached(say till we reach screen1) you can do something like:
Navigator.of(context).pushNamedAndRemoveUntil('/homepage','/screen1');

Answer 2

After 1st page use Navigator.pushReplacement instead Navigator.push
You can also use this to go first page:
Navigator.of(context).popUntil((route) => route.isFirst);