{"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 install flutter. for this you have to check out my previous blog on this topic. you can run easily this app because it has not a lot of&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_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}]}}