{"id":17281,"date":"2020-08-14T06:05:42","date_gmt":"2020-08-14T06:05:42","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17281"},"modified":"2020-08-14T13:34:12","modified_gmt":"2020-08-14T13:34:12","slug":"how-to-make-navigation-from-one-screen-to-other-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-make-navigation-from-one-screen-to-other-in-flutter\/","title":{"rendered":"How to Make Navigation from One Screen to Other in Flutter."},"content":{"rendered":"\n

Navigation<\/strong> <\/span>from One Screen<\/span><\/strong> to Other <\/span><\/strong>is pretty Easier<\/span><\/strong>, Just Follow <\/span><\/strong>the Below Steps <\/span><\/strong>:- <\/p>\n\n\n\n

Step 1 :-<\/em><\/span><\/strong> First of all, make two new files named home.dart<\/span><\/em><\/strong> and about.dart<\/span><\/em><\/strong> .<\/strong><\/p>\n\n\n\n

Step 2 :-<\/span><\/em><\/strong> Now in main.dart<\/span><\/strong><\/em>, import material.dart<\/em><\/strong><\/span> package library as well as home.dart<\/span><\/em><\/strong>. See the below image.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Step 3 :-<\/em><\/span><\/strong> Now we call main()<\/span><\/em><\/strong> in which we call runApp()<\/span><\/em><\/strong>, in which we call MaterialApp()<\/span><\/em><\/strong> widget<\/strong>.
Now we call Scaffold <\/em><\/strong>in home<\/span><\/em><\/strong> widget<\/strong> in which we call appBar<\/em><\/strong>. In appBar<\/strong>, we call Title<\/span><\/em><\/strong> as Text Widget<\/span><\/strong> in which we pass our App Title. After appBar<\/strong> we use Body Widget<\/span><\/em><\/strong> in which we pass our Own Widget<\/strong> Home()<\/span><\/em><\/strong>.<\/p>\n\n\n\n

See the Below code of main.dart<\/span><\/em><\/strong> :- <\/p>\n\n\n

import<\/span> 'package:flutter\/material.dart'<\/span>;\r\nimport<\/span> 'home.dart'<\/span>;\r\n\r\nvoid<\/span> main() {\r\n  runApp(MaterialApp(\r\n    home: Scaffold(\r\n      appBar: AppBar(\r\n        title: Text(\"Naviagtion App\"<\/span>),\r\n      ),\r\n      body<\/span>: Home(),\r\n    ),\r\n  ));\r\n}\r<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Step 4 :-<\/span><\/em><\/strong> Now in home.dart<\/span><\/em><\/strong>,  import material.dart<\/span><\/em><\/strong> package library as well as about.dart<\/span><\/em><\/strong>. See the below image.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Step 5 :-<\/span><\/em><\/strong>  After importing, we will make a Stateful Widget<\/span><\/em><\/strong>  with name Home<\/span><\/em><\/strong> and return container, in which Child widget<\/span><\/em><\/strong> is called. In child widget, we call column , in which we call Children Widget<\/span><\/em><\/strong>. Now in Children Widget<\/em><\/strong>, call RaisedButton()<\/span><\/em><\/strong> which onPressed<\/span><\/em><\/strong> call navigation push<\/em><\/strong>  and return our Own <\/strong>made Widget About()<\/span><\/em><\/strong>. After onPressed()<\/span><\/strong> widget, we call a Text widget<\/span><\/em><\/strong> named Child<\/em><\/strong> in which we write “Go\u00a0to\u00a0About\u00a0Screen<\/em>“<\/strong>. <\/p>\n\n\n\n
See the Below code of home.dart<\/span><\/em><\/strong> :-<\/p>\n\n\n\n