{"id":2009,"date":"2022-04-07T08:05:36","date_gmt":"2022-04-07T08:05:36","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2009"},"modified":"2022-04-07T08:05:36","modified_gmt":"2022-04-07T08:05:36","slug":"return-to-the-first-route-using-navigator-pop-method","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/return-to-the-first-route-using-navigator-pop-method\/","title":{"rendered":"Return to the first route using Navigator.pop() method"},"content":{"rendered":"\n<p>Now, we need to use Navigator.pop() method to close the second route and return to the first route. The\u00a0<strong>pop()<\/strong>\u00a0method allows us to remove the current route from the stack, which is managed by the Navigator.To implement a return to the original route, we need to update the\u00a0<strong>onPressed()<\/strong>\u00a0callback method in the SecondRoute widget as below code snippet:<a href=\"https:\/\/www.javatpoint.com\/flutter-navigation-and-routing#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-navigation-and-routing#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-navigation-and-routing#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Within the SecondRoute widget  \nonPressed: () {  \n  Navigator.pop(context);  \n}  <\/code><\/pre>\n\n\n\n<p>Now, let us see the full code to implement the navigation between two routes. First, create a Flutter project and insert the following code in the\u00a0<strong>main.dart<\/strong>\u00a0file.<a href=\"https:\/\/www.javatpoint.com\/flutter-navigation-and-routing#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-navigation-and-routing#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-navigation-and-routing#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MaterialApp(  \n    title: 'Flutter Navigation',  \n    theme: ThemeData(  \n      \/\/ This is the theme of your application.  \n      primarySwatch: Colors.green,  \n    ),  \n    home: FirstRoute(),  \n  ));  \n}  \n  \nclass FirstRoute extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text('First Screen'),  \n      ),  \n      body: Center(  \n        child: RaisedButton(  \n          child: Text('Click Here'),  \n          color: Colors.orangeAccent,  \n          onPressed: () {  \n            Navigator.push(  \n              context,  \n              MaterialPageRoute(builder: (context) => SecondRoute()),  \n            );  \n          },  \n        ),  \n      ),  \n    );  \n  }  \n}  \n  \nclass SecondRoute extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text(\"Second Screen\"),  \n      ),  \n      body: Center(  \n        child: RaisedButton(  \n          color: Colors.blueGrey,  \n          onPressed: () {  \n            Navigator.pop(context);  \n          },  \n          child: Text('Go back'),  \n        ),  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When you run the project in the&nbsp;<strong>Android Studio,<\/strong>&nbsp;you will get the following screen in your emulator. It is the first screen that contains only a single button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-navigation-and-routing.png\" alt=\"Flutter Navigation and Routing\"\/><\/figure>\n\n\n\n<p>Click the button&nbsp;<strong>Click Here,<\/strong>&nbsp;and you will navigate to a second screen as below image. Next, when you click on the button&nbsp;<strong>Go Back,<\/strong>&nbsp;you will return to the first page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-navigation-and-routing2.png\" alt=\"Flutter Navigation and Routing\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Now, we need to use Navigator.pop() method to close the second route and return to the first route. The\u00a0pop()\u00a0method allows us to remove the current route from the stack, which is managed by the Navigator.To implement a return to the original route, we need to update the\u00a0onPressed()\u00a0callback method in the SecondRoute widget as below code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[80],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2009"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2009"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2009\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}