{"id":252,"date":"2019-01-10T03:30:22","date_gmt":"2019-01-10T03:30:22","guid":{"rendered":"http:\/\/jackofalltradesmasterofsome.com\/blog\/?p=252"},"modified":"2019-01-28T20:12:53","modified_gmt":"2019-01-28T20:12:53","slug":"setting-up-visual-studio-code-and-creating-your-first-flutter-app","status":"publish","type":"post","link":"http:\/\/jackofalltradesmasterofsome.com\/blog\/2019\/01\/10\/setting-up-visual-studio-code-and-creating-your-first-flutter-app\/","title":{"rendered":"Setting up Visual Studio Code and creating your first Flutter app"},"content":{"rendered":"\n<p>In the <a href=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/2019\/01\/05\/setting-up-flutter-on-a-mac\/\">previous post<\/a>, we discussed how to set up Flutter on a Mac. So lets now quickly go over how to now we will look at setting up Visual Studio Code and creating your first Flutter app<\/p>\n\n\n\n<!--more-->\n\n\n\n<ol class=\"wp-block-list\"><li>We will first need to set up the necessary extensions. Click on the icon below located on the right-hand side and install the following extensions. <br> a. <g class=\"gr_ gr_27 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace\" id=\"27\" data-gr-id=\"27\">Flutter<\/g><br><g class=\"gr_ gr_27 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace\" id=\"27\" data-gr-id=\"27\"> b<\/g>. Dart<\/li><li>Create a new empty folder and then open it in Visual Studio Code<\/li><li>Create a new flutter project by opening Terminal and Navigate to the folder you created. Here is the starter location for my No0Days app.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"100\" src=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.42.06-PM.png\" alt=\"\" class=\"wp-image-257\" srcset=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.42.06-PM.png 674w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.42.06-PM-300x45.png 300w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Run the command &#8220;flutter create <g class=\"gr_ gr_23 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"23\" data-gr-id=\"23\">yourappname<\/g>&#8221; and replace <g class=\"gr_ gr_24 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"24\" data-gr-id=\"24\">yourappname<\/g> with the correct name to get it created. The terminal will autorun flutter doctor after as a health check. Inside Visual Studio Code, you will now see your new project. You will need to be connected to the internet for this step. <\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.44.20-PM-1024x596.png\" alt=\"\" class=\"wp-image-256\" srcset=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.44.20-PM-1024x596.png 1024w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.44.20-PM-300x174.png 300w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.44.20-PM-768x447.png 768w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.44.20-PM.png 1152w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"726\" src=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.46.30-PM.png\" alt=\"\" class=\"wp-image-255\" srcset=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.46.30-PM.png 944w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.46.30-PM-300x231.png 300w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.46.30-PM-768x591.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Go ahead and start your device emulator if you have not already by typing &#8220;open -a simulator&#8221; in your terminal window.<\/li><\/ol>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"807\" src=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.48.14-PM-1024x807.png\" alt=\"\" class=\"wp-image-254\" srcset=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.48.14-PM-1024x807.png 1024w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.48.14-PM-300x236.png 300w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.48.14-PM-768x605.png 768w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.48.14-PM-1200x946.png 1200w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.48.14-PM.png 1954w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Navigate to inside the root folder by going one layer down from where you are in terminal. &#8220;cd no0days&#8221;, and then run &#8220;flutter run&#8221; to run your first app. After a few seconds of installing the app, you should now have your first up and running application! The cool thing about Flutter is that it allows you to hot reload the application while developing so you can see your changes instantly. Just hit &#8220;r&#8221; in the terminal to reload and voila, your app changes appear!<\/li><\/ol>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"775\" src=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.51.30-PM-1024x775.png\" alt=\"\" class=\"wp-image-253\" srcset=\"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.51.30-PM-1024x775.png 1024w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.51.30-PM-300x227.png 300w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.51.30-PM-768x581.png 768w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.51.30-PM-1200x908.png 1200w, http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-08-at-9.51.30-PM.png 1946w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In the previous post, we discussed how to set up Flutter on a Mac. So lets now quickly go over how to now we will look at setting up Visual Studio Code and creating your first Flutter app<\/p>\n","protected":false},"author":1,"featured_media":243,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52,53,54],"tags":[55,56,59,66],"class_list":["post-252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-dev","category-flutter","category-mobile-app","tag-app-dev","tag-flutter","tag-mac","tag-visual-studio-code"],"_links":{"self":[{"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":2,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":294,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/posts\/252\/revisions\/294"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/media\/243"}],"wp:attachment":[{"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jackofalltradesmasterofsome.com\/blog\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}