{"id":2003,"date":"2022-04-07T08:01:49","date_gmt":"2022-04-07T08:01:49","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2003"},"modified":"2022-04-07T08:01:49","modified_gmt":"2022-04-07T08:01:49","slug":"navigation-and-routing","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/navigation-and-routing\/","title":{"rendered":"Navigation and Routing"},"content":{"rendered":"\n<p>Navigation and routing are some of the core concepts of all mobile application, which allows the user to move between different pages. We know that every mobile application contains several screens for displaying different types of information.&nbsp;<strong>For example,<\/strong>&nbsp;an app can have a screen that contains various products. When the user taps on that product, immediately it will display detailed information about that product.<\/p>\n\n\n\n<p>In Flutter, the screens and pages are known as&nbsp;<strong>routes,<\/strong>&nbsp;and these routes are just a widget. In Android, a route is similar to an&nbsp;<strong>Activity,<\/strong>&nbsp;whereas, in iOS, it is equivalent to a&nbsp;<strong>ViewController.<\/strong><\/p>\n\n\n\n<p>In any mobile app, navigating to different pages defines the workflow of the application, and the way to handle the navigation is known as&nbsp;<strong>routing.<\/strong>&nbsp;Flutter provides a basic routing class&nbsp;<strong>MaterialPageRoute<\/strong>&nbsp;and two methods&nbsp;<strong>Navigator.push()<\/strong>&nbsp;and&nbsp;<strong>Navigator.pop()<\/strong>&nbsp;that shows how to navigate between two routes. The following steps are required to start navigation in your application.<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>&nbsp;First, you need to create two routes.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp;Then, navigate to one route from another route by using the Navigator.push() method.<\/p>\n\n\n\n<p><strong>Step 3:<\/strong>&nbsp;Finally, navigate to the first route by using the Navigator.pop() method.<\/p>\n\n\n\n<p>Let us take a simple example to understand the navigation between two routes:<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navigation and routing are some of the core concepts of all mobile application, which allows the user to move between different pages. We know that every mobile application contains several screens for displaying different types of information.&nbsp;For example,&nbsp;an app can have a screen that contains various products. When the user taps on that product, immediately [&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\/2003"}],"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=2003"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2003\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}