Setting up Flutter for Windows

If your Flutter configuration is taking forever to set up, this article is for you. This article will guide you to set up flutter path and set up environment for both VS Code and Android Studio.

Flutter setup is a headache for you too? Well after this article, it won’t be anymore.

Attending many different talks and workshops, one thing that has come to my notice is although people are interested in Flutter but they are not able to set up Flutter environment successfully and this makes them lose interest very soon.
Working with Flutter for almost an year has given me an experience for setting up Flutter for both Windows and a Linux system since I too have faced many issues myself, and wasted hours searching for the solution.
To save your time and energy, here’s a comprehensive guide on how to completely set up Flutter environment for a Windows PC.

Let's jump right in, shall we?

Note: Next article will cover the setup for Linux.

Flutter + Windows. Courtesy of Canva.com

Windows Setup:

Files to be download:
1. Flutter SDK

Download Flutter SDK Page. Click the blue-button to download the SDK.

2. Git for Windows

This page opens up when you click the Git for Windows link and thedownload starts automatically.

Assuming that you have PowerShell and Java 1.8 pre-installed, let’s continue.
Applications/ IDE to be downloaded:
1. Android Studio (Mandatory)

Step-1 : Click on Download Android Studio.

Step-2 : Check the Terms And Conditions checkbox and click on “DOWNLOAD ANDROID STUDIO FOR WINDOWS” button, i.e., blue coloured button.

Run the installer file that was just downloaded to install Android Studio. While selecting SDK to be downloaded, please select SDK version 28, since SDK v29 is known for some issues with Flutter for now.

2. VS Code (As per wish)

Click on Windows and wait for 1 min. The download would start automatically.

Installing GIT (Since installing and setting up GIT is beyond scope of this article, here’s a link to set it up on Windows)

Steps to install Flutter SDK:

1. Extract the downloaded Flutter SDK and copy the flutter folder to C:\ Drive, or alternatively you can extract it directly in C:\ Drive.

Extract the flutter folder to C:\ Drive from the flutter SDK zip file that was downloaded earlier.

2. Navigate to bin folder inside the flutter directory.

These are the contents of bin folder under the flutter directory

3. Click on the address bar at the top and copy the address of the bin folder.

Click on the address bar and copy (Ctrl + C) the entire address.

4. Now comes easy part but follow along. Press Windows Key on keyboard and type env and press Enter.

Click the Windows button at the bottom left of the screen or press Windows Key on the keyboard and search “env”. Press Enter.

5. Now locate the Environment Variables button located at the bottom right side of the System Properties window that opened up.

Click on the Environment Variables button located just above the Cancel Button.

6. Now you can see two different sections. First One is for User Variables and the second one is for System Variables.

The top section “User Variable for Pratik Singhal” is important to us.

7. For flutter setup, we need the User Variables section. Locate the Path variable under the User Variable section and double click on it. (Refer Image above)

This window opens up after double-clicking on Path.

8. Now click on New at the top right side of the window that opened up. Paste the flutter/bin directory path that we copied in Step-3.

After clicking on new, paste the address and it should look like this. Press Enter 3 times to save and close it.

9. You will see the System Properties window again after pressing Enter three times. Click OK and the path for flutter is successfully set up for your Windows machine

You should successfully be able to come back to this screen. Click OK and flutter path set-up is finished.

10. Congratulations! We have successfully set up the path for Flutter SDK. To check for verification, open Command Prompt(press Win+R, then type cmd).

11. Type the following in the command prompt:

flutter doctor

This type of output should be obtained on running flutter doctor:

Since a new flutter version was available to upgrade, it showed me that too. Flutter is awesome, isn’t it?

Yay! We have set up flutter path successfully on a Windows system.

That wasn’t too much, was it? But this is not the end.

Setting up Flutter Enviroment for VS Code:

Now since the path is set, the bigger question is, how do we start developing flutter apps Pratik, duh?

Note: The VS Code setup for both Windows and Linux is the same.

Well, in terms for enviroment setup, VS Code hardly takes up a min. So lets begin right away?
1. Fire up VS Code and make sure you see the Welcome Page on it. If there are other folders open, just press Alt+F and then from the menu select the Close Folder option (3rd option from the last).

This is what Welcome Page looks like.

2. Click the second last block-icon button on the left toolbar. When you hover over it, it should say Extensions. Or, you can alternatively press Ctrl+Shift+X key combinations to open the Extensions panel.

Click on the second last icon. This toolbar is on the left side of the VS Code window.

3. Search for flutter and click on install. This will automatically install the Flutter and Dart extensions.

Search for Flutter extension and install the first one.

Pro-tip: There’s another extension called Awesome Flutter Snippets(just below the flutter extension in the above image), which provide some really important and useful pre-written code snippets that you’ll need as you go ahead.

And here we are, after successfully setting up the Flutter environment for VS Code and you are completely ready to dive into application development using Flutter.

No Pratik, I dont want to use VS Code, tell me how to configure Flutter environment for Android Studio itself.

Setting up Flutter Environment in Android Studio:

Well, if you have decided to carry on with Android Studio only, then follow these steps:
1. Fire up Android Studio. You should see something like this. If you don’t get this since one of your projects is open, then close your android project from the File option on top right. And this screen would pop right up!

Welcome screen of Android Studio. Flutter Project option is available because the flutter plugin is already installed for Android Studio in my laptop.

2. Click the Configure button located at the bottom left side of the Welcome Screen. Click on Plugins option from the dropdown menu.

Click on Plugin option from the dropdown menu

3. Search for flutter in the Plugins window that pops up. Make sure the Marketplace tab is active as shown in the image.

Search for flutter plugin and install it.

Note:Doing this will install both Flutter and Dart plugin inside Android Studio. The Welcome Page will now give an option to Start a New Flutter Project when you fire up Android Studio.

Start new Flutter project option now appears on the Welcome Screeen.

Okay, so Flutter environment is set up for Android Studio too.

So you are now ready to dive into the magical world of Flutter. Make awesome apps in short amount of time and amaze your friends!

Hope this article was helpful. Share it with your friends who might find it useful. Also do you know that you can clap 50 times for a single article?
Try it out.
Also, do follow since another article for Linux setup is also coming soon.

Till then, Happy Fluttering!