Installing Flutter to use with Visual Studio Code

Flutter is actually a SDK/framework on top of the Dart programming language.

To install Flutter with Visual Studio Code you will have to perform several tasks which we will layout here. I have chosen Visual Studio Code (VSC) because both are supported on multiple platforms, don’t require huge amounts of resources to run, and are free to use.

To get this system working you will need to:

• Install the Flutter SDK (Software Development Kit)
• Install Visual Studio Code
• Install the Flutter Extension for VSC

Installing the Flutter SDK

Go to the Flutter website (https://flutter.dev/) and click on the links to Docs.

Click on the Get Started button on the left side. Then click the Install Link.

This will take you to a download page for different Operating Systems. Pick your appropriate system. If you are using VSC, then you will probably be picking Windows, Mac, or Linux, although you can also download Flutter for ChromeOS.

For Windows at least, you just get a download zip file. You will need to extract the file contents to a folder. Some installation instructions recommend not putting it in C:\Program Files\ because of elevated permissions in that folder. Instead, they recommend putting it in either C:\Flutter\ or C:\<user name>\Flutter\ which is what I personally did.

Setting your Path Environment Variable

Since there isn’t an “installer” for the Flutter SDK, you need to tell your system where it can find it. This is through a path environment variable. How you set it will be dependent upon your operating system. I will walk you through where to modify it under Windows 10.

1. Right click on your Windows button (usually found in the bottom left corner of your screen)
2. Click on “System” from the pop up window.
3. On the right side of the new screen, click on Advanced System Settings.
4. Click on the button Environment Variables, which should be in the bottom right of that new window.
5. A new window will appear, which has two halves. We are concerned about the bottom – System Variables
6. Scroll down until you see on Path, then double click on that line.
7. In the new window, Click on the button that says New
8. Type in the path to where you installed Flutter. For example: C:\<user name>\Flutter\
9. Click OK on each of the windows, until they all are closed that were open during this process.

Installing Visual Studio Code

Go to https://code.visualstudio.com/download and pick the download that is appropriate for your operating system. At this time, VSC supports Windows, Mac, and Linux.

Note: You may need to know what type of processor you have.

Once you have downloaded the file, run the installer based upon the instructions. For Windows, it opened a wizard to install.

Installing the Flutter Extension

Luckily, installing the Flutter extension is fairly simple.

1. Open Visual Studio Code
2. Open Extensions on the left panel
3. Search for Flutter
4. Install the Flutter extension. I choose the first one.

Testing the install

Once you have all of the components installed you will want to test to make sure it works.

In VSC, on the PC press CTRL-SHIFT-P (On Mac CMD-SHIFT-P) to open the command.

Type in Flutter – Doctor – it should come up for you, and run that command. It will verify that Flutter is installed and accessible to VSC.

Installing Flutter to use with Visual Studio Code was originally found on Access 2 Learn