{"id":16322,"date":"2020-07-16T10:16:04","date_gmt":"2020-07-16T10:16:04","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=16322"},"modified":"2020-09-10T06:39:22","modified_gmt":"2020-09-10T06:39:22","slug":"how-to-write-a-hello-world-app-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-write-a-hello-world-app-in-flutter\/","title":{"rendered":"How to write a Hello World App in Flutter?"},"content":{"rendered":"\n<p>Hey folks, Here we are going to run a Hello World Application in Flutter. so if you want to do this. first of all, you have to install flutter. for this you have to check out my previous <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/www.devopsschool.com\/blog\/what-is-flutter-and-how-to-use-it-for-app-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">blog<\/a> on this topic. <\/p>\n\n\n\n<p>you can run easily this app because it has not a lot of code . but you should checkout how this is working . so let&#8217;s start the blog on this.<\/p>\n\n\n\n<p>Here i am going to describe you how to run app using Android Studio. Please follow below steps to run a <strong>Hello World<\/strong> app.<\/p>\n\n\n\n<p><strong>Step 1<\/strong> : Open Android Studio<\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"486\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-front-view-for-flutter-app.jpg\" alt=\"\" data-id=\"18546\" data-full-url=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-front-view-for-flutter-app.jpg\" data-link=\"https:\/\/www.devopsschool.com\/blog\/how-to-write-a-hello-world-app-in-flutter\/android-front-view-for-flutter-app-2\/\" class=\"wp-image-18546\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-front-view-for-flutter-app.jpg 771w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-front-view-for-flutter-app-300x189.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-front-view-for-flutter-app-768x484.jpg 768w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p><strong>Step 2 :<\/strong> then Select Flutter Application<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"541\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/2-flutter-application.jpg\" alt=\"\" data-id=\"18547\" data-full-url=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/2-flutter-application.jpg\" data-link=\"https:\/\/www.devopsschool.com\/blog\/how-to-write-a-hello-world-app-in-flutter\/2-flutter-application-2\/\" class=\"wp-image-18547\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/2-flutter-application.jpg 776w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/2-flutter-application-300x209.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/2-flutter-application-768x535.jpg 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p><strong>Step 3 : <\/strong> Now you have to type Project name , choose Flutter SDK path, Project Location and type some description about this app. after all of above things you can proceed further.<\/p>\n\n\n\n<figure class=\"wp-block-embed-imgur wp-block-embed is-type-rich is-provider-imgur\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/imgur.com\/NVi5PnA\n<\/div><\/figure>\n\n\n\n<p><strong>Step 4<\/strong>: Select Both option under Platform channel language i.e. Kotlin and Swift.  then click on Finish Button.<\/p>\n\n\n\n<figure class=\"wp-block-embed-imgur wp-block-embed is-type-rich is-provider-imgur\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/i.imgur.com\/dNvVgcl.jpg\n<\/div><\/figure>\n\n\n\n<p><strong>Step 5<\/strong> : after running the application your android Studio will look like below image. then you simply delete all code under <strong><em>lib\/main.dart<\/em><\/strong>. Put below code for a Hello World App.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/cmschandan\/a0a26166fc28c1f48a1fdd8c98ac52b1.js\"><\/script>\n\n\n\n<p><strong>Step 6 <\/strong>: for more details on Stateless Widget. you can read it on <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/flutter.dev\/docs\/development\/ui\/widgets-intro\" target=\"_blank\" rel=\"noreferrer noopener\">official doc of Flutter<\/a>. <\/p>\n\n\n\n<p>Now we are going to run the App in our Android Emulator. so we have to start emulator under <em>AVD Manager<\/em> (Tools Menu -&gt; AVD Manager). after starting emulator. you should click on Run button to run the app in Emulator.<\/p>\n\n\n\n<figure class=\"wp-block-embed-imgur wp-block-embed is-type-rich is-provider-imgur\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/i.imgur.com\/xg0I2UP.jpg\n<\/div><figcaption><strong>AVD Manager Button<\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"537\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/launch-avd-emulator-button.jpg\" alt=\"\" data-id=\"18552\" data-full-url=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/launch-avd-emulator-button.jpg\" data-link=\"https:\/\/www.devopsschool.com\/blog\/how-to-write-a-hello-world-app-in-flutter\/launch-avd-emulator-button-2\/\" class=\"wp-image-18552\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/launch-avd-emulator-button.jpg 930w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/launch-avd-emulator-button-300x173.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/launch-avd-emulator-button-768x443.jpg 768w\" sizes=\"auto, (max-width: 930px) 100vw, 930px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"259\" height=\"503\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-emulator-nexus5-2.jpg\" alt=\"\" class=\"wp-image-18556\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-emulator-nexus5-2.jpg 259w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/android-emulator-nexus5-2-154x300.jpg 154w\" sizes=\"auto, (max-width: 259px) 100vw, 259px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"572\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/hello-world-app-view.jpg\" alt=\"\" class=\"wp-image-18557\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/hello-world-app-view.jpg 291w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/hello-world-app-view-153x300.jpg 153w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure><\/div>\n\n\n\n<p>so this is the simple app for a Hello World app. if you find any missing step then let me know and comment us for more updates on this topic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey folks, Here we are going to run a Hello World Application in Flutter. so if you want to do this. first of all, you have to&#8230; <\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[530],"tags":[5825,6204,6203,6257],"class_list":["post-16322","post","type-post","status-publish","format-standard","hentry","category-android","tag-android","tag-android-studio","tag-flutter","tag-widgets"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=16322"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16322\/revisions"}],"predecessor-version":[{"id":18558,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16322\/revisions\/18558"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=16322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=16322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=16322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}