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.
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.
Windows Setup:
Files to be download:
1. Flutter SDK
Assuming that you have PowerShell and Java 1.8 pre-installed, let’s continue.
Applications/ IDE to be downloaded:
1. Android Studio (Mandatory)
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)
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:
- Extract the downloaded Flutter SDK and copy the flutter folder to C:\ Drive, or alternatively you can extract it directly in C:\ Drive.
2. Navigate to bin folder inside the flutter directory.
3. Click on the address bar at the top and copy the address of the bin folder.
4. Now comes easy part but follow along. Press Windows Key on keyboard and type env and press Enter.
5. Now locate the Environment Variables button located at the bottom right side of the System Properties window that opened up.
6. Now you can see two different sections. First One is for User Variables and the second one is for System Variables.
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)
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.
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
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:
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).
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.
3. Search for flutter and click on install. This will automatically install the Flutter and Dart extensions.
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!
2. Click the Configure button located at the bottom left side of the Welcome Screen. Click on Plugins 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.
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.
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!