{"id":1957,"date":"2022-04-07T06:30:43","date_gmt":"2022-04-07T06:30:43","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=1957"},"modified":"2022-04-07T06:30:43","modified_gmt":"2022-04-07T06:30:43","slug":"first-app-steps-8-9-and-10","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/first-app-steps-8-9-and-10\/","title":{"rendered":"First App Steps  8, 9 , and 10 :"},"content":{"rendered":"\n<p><strong>Step 8:<\/strong>&nbsp;Let us understand the above code snippet line by line.<\/p>\n\n\n\n<ul><li>To start Flutter programming, you need first to import the Flutter package. Here, we have imported a&nbsp;<strong>Material package<\/strong>. This package allows you to create user interface according to the Material design guidelines specified by Android.<\/li><li>The second line is an entry point of the Flutter applications similar to the main method in other programming languages. It calls the&nbsp;<strong>runApp<\/strong>&nbsp;function and pass it an object of&nbsp;<strong>MyApp<\/strong>&nbsp;The primary purpose of this function is to attach the given widget to the screen.<\/li><li>Line 5 to 18 is a widget used for creating UI in the Flutter framework. Here, the&nbsp;<strong>StatelessWidget<\/strong>&nbsp;does not maintain any state of the widget. MyApp extends StatelessWidget that overrides its&nbsp;<strong>build<\/strong>&nbsp;The build method is used for creating a part of the UI of the application. In this block, the build method uses MaterialApp, a widget to create the root level UI of the application and contains three properties &#8211; title, theme, and home.<ol><li><strong>Title:<\/strong>&nbsp;It is the title of the Flutter application.<\/li><li><strong>Theme:<\/strong>&nbsp;It is the theme of the widget. By default, it set the blue as the overall color of the application.<\/li><li><strong>Home:<\/strong>&nbsp;It is the inner UI of the application, which sets another widget (MyHomePage) for the application.<\/li><\/ol><\/li><li>Line 19 to 35, the&nbsp;<strong>MyHomePage<\/strong>&nbsp;is similar to MyApp, except it will return the&nbsp;<strong>Scaffold<\/strong>&nbsp;Scaffold widget is a top-level widget after the MaterialApp widget for creating the user interface. This widget contains two properties&nbsp;<strong>appBar<\/strong>&nbsp;and&nbsp;<strong>body<\/strong>. The appBar shows the header of the app, and body property shows the actual content of the application. Here,&nbsp;<strong>AppBar<\/strong>&nbsp;render the header of the application,&nbsp;<strong>Center<\/strong>&nbsp;widget is used to center the child widget, and&nbsp;<strong>Text<\/strong>&nbsp;is the final widget used to show the text content and displays in the center of the screen.<\/li><\/ul>\n\n\n\n<p><strong>Step 9:<\/strong>&nbsp;Now, run the application. To do this, go to Run-&gt;Run main.dart, as shown in the below screen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-first-application7.png\" alt=\"Flutter First Application\"\/><\/figure>\n\n\n\n<p><strong>Step 10:<\/strong>&nbsp;Finally, you will get the output as below screen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-first-application8.png\" alt=\"Flutter First Application\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Step 8:&nbsp;Let us understand the above code snippet line by line. To start Flutter programming, you need first to import the Flutter package. Here, we have imported a&nbsp;Material package. This package allows you to create user interface according to the Material design guidelines specified by Android. The second line is an entry point of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[418],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/1957"}],"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=1957"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/1957\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=1957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=1957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=1957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}