{"id":32591,"date":"2024-11-01T09:10:11","date_gmt":"2024-11-01T09:10:11","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32591"},"modified":"2024-11-01T11:54:41","modified_gmt":"2024-11-01T11:54:41","slug":"flutter-course-6-1-setting-up-vs-code","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32591\/","title":{"rendered":"Flutter Course, 6.1 Setting Up VS Code"},"content":{"rendered":"

Hello! In this course, we will cover how to set up VS Code (Visual Studio Code) for Flutter development. VS Code is a code editor loved by many developers due to its various extensibility and features. In this course, we will learn step-by-step from installing VS Code to setting up the Flutter environment.<\/p>\n

1. Installing VS Code<\/h2>\n

VS Code can be used on various operating systems. First, we will install VS Code following the procedures below.<\/p>\n

    \n
  1. Visit the official VS Code website (https:\/\/code.visualstudio.com\/<\/a>).<\/li>\n
  2. Click the ‘Download’ button on the homepage and download the installation file suitable for your operating system.<\/li>\n
  3. Run the downloaded file and proceed with the installation following the instructions of the installation wizard.<\/li>\n
  4. Once installation is complete, launch VS Code.<\/li>\n<\/ol>\n

    2. Installing Flutter SDK<\/h2>\n

    To develop in Flutter, you must first install the Flutter SDK. The Flutter SDK is a tool that helps you develop applications that can run on multiple platforms.<\/p>\n

      \n
    1. Visit the official Flutter website (https:\/\/flutter.dev\/docs\/get-started\/install<\/a>).<\/li>\n
    2. Download the Flutter SDK suitable for your operating system.<\/li>\n
    3. Extract the downloaded file and move it to your desired location (e.g., C:\\src\\flutter).<\/li>\n
    4. Add the location of Flutter to the system PATH. This requires modifying the environment variables.<\/li>\n
    5. Open Command Prompt (Windows) or Terminal (Mac\/Linux) and enter the following command to verify that the installation was completed successfully.<\/li>\n<\/ol>\n
      \nflutter doctor\n<\/pre>\n
      This command checks the installation status of the Flutter SDK and informs you of the installation status of necessary components (e.g., Android SDK, Xcode, etc.).<\/p>\n
      3. Installing Dart Plugin<\/h2>\n
      Since Flutter is based on a language called Dart, you need to install the Dart plugin in VS Code.<\/p>\n
        \n
      1. After running VS Code, click on the ‘Extensions’ icon in the left sidebar.<\/li>\n
      2. Type ‘Dart’ in the search bar and find the official Dart plugin to install.<\/li>\n<\/ol>\n
        Once the installation is complete, VS Code will recognize the Dart language.<\/p>\n
        4. Installing Flutter Extension<\/h2>\n
        To conduct Flutter development more efficiently, we also install Flutter-related extensions.<\/p>\n
          \n
        1. Similarly, search for ‘Flutter’ in the VS Code ‘Extensions’ menu.<\/li>\n
        2. Find the official Flutter extension and install it.<\/li>\n<\/ol>\n
          By installing the Flutter extension, you will have access to various useful features for creating and managing Flutter projects.<\/p>\n
          5. Creating a New Flutter Project<\/h2>\n
          Now that all settings are complete, let’s create a new Flutter project.<\/p>\n
            \n
          1. Select the ‘View’ menu in VS Code and click on ‘Command Palette’. (You can also press Ctrl<\/kbd> + Shift<\/kbd> + P<\/kbd>.)<\/li>\n
          2. Type ‘Flutter: New Project’ in the Command Palette.<\/li>\n
          3. Select the type of project. Here, choose ‘Flutter Application’.<\/li>\n
          4. Enter a name for the project and select a location to save it.<\/li>\n<\/ol>\n
            VS Code will automatically generate the Flutter project file structure for you.<\/p>\n
            6. Setting Up Emulator and Devices<\/h2>\n
            To test your Flutter app, you need to set up a physical device or emulator. Let’s proceed with the steps below.<\/p>\n
              \n
            1. You can install Android Studio to use the Android emulator. After installing Android Studio, use the AVD (Android Virtual Device) manager to create the desired emulator.<\/li>\n
            2. Alternatively, connect a real iOS or Android device via USB. In this case, you must enable USB debugging on the device.<\/li>\n
            3. In VS Code, go to the ‘Debug’ menu and select ‘Start Debugging’ or press F5<\/kbd> to run the app.<\/li>\n<\/ol>\n
              7. Running the Flutter Project<\/h2>\n
              After creating the project, you can enter the following command to run the Flutter project on the emulator or connected device.<\/p>\n
              \nflutter run\n<\/pre>\n
              During this process, the project will be built and the application will run on the emulator. If an error occurs, use the ‘flutter doctor’ command to troubleshoot.<\/p>\n
              8. Writing and Modifying Code<\/h2>\n
              Now that the Flutter project is set up, start writing and modifying your code. VS Code offers various features such as code completion, error highlighting, and debugging tools, making your development work more efficient.<\/p>\n
              9. Conclusion and Additional Resources<\/h2>\n
              In this course, we explored how to set up the Flutter development environment using VS Code. In addition, check out the official Flutter documentation, community, and GitHub repositories for more information and learning materials.<\/p>\n
              In the next course, we will look into the basic widgets and layouts in Flutter. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
              Hello! In this course, we will cover how to set up VS Code (Visual Studio Code) for Flutter development. VS Code is a code editor loved by many developers due to its various extensibility and features. In this course, we will learn step-by-step from installing VS Code to setting up the Flutter environment. 1. Installing … \ub354 \ubcf4\uae30 “Flutter Course, 6.1 Setting Up VS Code”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[151],"tags":[],"class_list":["post-32591","post","type-post","status-publish","format-standard","hentry","category-flutter-course"],"yoast_head":"\nFlutter Course, 6.1 Setting Up VS Code - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32591\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Course, 6.1 Setting Up VS Code - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Hello! In this course, we will cover how to set up VS Code (Visual Studio Code) for Flutter development. VS Code is a code editor loved by many developers due to its various extensibility and features. In this course, we will learn step-by-step from installing VS Code to setting up the Flutter environment. 1. Installing … \ub354 \ubcf4\uae30 "Flutter Course, 6.1 Setting Up VS Code"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32591\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:10:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:54:41+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32591\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32591\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Flutter Course, 6.1 Setting Up VS Code\",\"datePublished\":\"2024-11-01T09:10:11+00:00\",\"dateModified\":\"2024-11-01T11:54:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32591\/\"},\"wordCount\":689,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Flutter course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32591\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32591\/\",\"name\":\"Flutter Course, 6.1 Setting Up VS Code - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:10:11+00:00\",\"dateModified\":\"2024-11-01T11:54:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32591\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32591\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32591\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Course, 6.1 Setting Up VS Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter Course, 6.1 Setting Up VS Code - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32591\/","og_locale":"ko_KR","og_type":"article","og_title":"Flutter Course, 6.1 Setting Up VS Code - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Hello! In this course, we will cover how to set up VS Code (Visual Studio Code) for Flutter development. VS Code is a code editor loved by many developers due to its various extensibility and features. In this course, we will learn step-by-step from installing VS Code to setting up the Flutter environment. 1. Installing … \ub354 \ubcf4\uae30 \"Flutter Course, 6.1 Setting Up VS Code\"","og_url":"https:\/\/atmokpo.com\/w\/32591\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:10:11+00:00","article_modified_time":"2024-11-01T11:54:41+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32591\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32591\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Flutter Course, 6.1 Setting Up VS Code","datePublished":"2024-11-01T09:10:11+00:00","dateModified":"2024-11-01T11:54:41+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32591\/"},"wordCount":689,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Flutter course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32591\/","url":"https:\/\/atmokpo.com\/w\/32591\/","name":"Flutter Course, 6.1 Setting Up VS Code - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:10:11+00:00","dateModified":"2024-11-01T11:54:41+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32591\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32591\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32591\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Flutter Course, 6.1 Setting Up VS Code"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32591"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32591\/revisions"}],"predecessor-version":[{"id":32592,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32591\/revisions\/32592"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}