Complete Flutter Set Up in VS Code
Setting up Flutter in VS Code can be a little tricky due to the number of different setups involved to get it up and working. I have tried to formulate all the steps you need to perform and all the errors you might encounter and how to handle those errors.
- The very first step would be to download the flutter SDK zip file from their Official Website. (You can visit the embedded link.)
2. As you click on the link you will be directed to a page that looks something like this. Click on the “Get Started” button on the page and then select the operating system of your choice (This blog is about set up in Windows). Next, download the Flutter SDK Zip file on your machine.
3. Now that you have downloaded the SDK zip file you have to extract the file into a folder. I have extracted it into a folder called Flutter in C Drive.
4. After you have extracted you need to add the bin folder inside the flutter SDK that you extracted to your environment variables. For that search environment variables in your windows and then add to the path, the path of your bin folder. I have shared the screenshots below.
5. After you have done this run your command prompt as an administrator and run the command “flutter doctor” in it. It will take some time to check all the dependencies. Now, since you do not have java installed, vs code set up and your android set up the flutter doctor will give a lot of errors.
6. Now let’s first set up your mobile. Open your mobile and search for the build number in the settings. Once you get the build number tap on it for 7 times to enable the developer’s options. Once that is done search for “USB debugging” and enable that. Now your android is all set up to be recognized by the flutter and run all the apps you develop in it. Plugin your mobile phone with a USB cord to your machine and run flutter doctor again. This time it should show that it recognized your device.
7. Now let’s install VS Code and all the required extensions in it. To install VS Code go to their Official Website (Click on the embedded link below) and download the executable file according to your system and follow the setup wizard to set up VS Code in your system.
8. After you have downloaded VS Code, download the flutter and dart extensions in it. These extensions are necessary for enabling flutter in VS Code.
9. After you have done this run “flutter doctor” again in the command prompt. Now the flutter will recognize your device and the IDE (VS Code) but still will give error for Android Toolchain. For this, you have to install Java and add it to your environment variables.
10. Now install JDK and JRE from their official website (Link embedded below). Extract the JDK zip file in a folder (I have extracted it in a folder named Java in my C Drive) in your machine and note its path. Run the JRE executable file that you have downloaded. By default, the JRE will get installed in your C Drive, Program Files folder, and within a Java folder inside the Program Files. Also, note its path. Now you have to add them to your environment variables. Add the JDK path to the JAVA_HOME variable and the JRE path to the JRE_HOME variable. If you do not find the variables created by default then create them and then add the path.
11. Now when you run “flutter doctor” doctor in your command prompt, all the issues should be resolved and we are ready to create our first flutter project.
Note: There will still be an error that will say “Android Studio not found”. We can ignore that. We will be using VS Code as the IDE so we do not necessarily need to install Android Studio on our machine.
12. Now it is time to make our first flutter project and run the default app that flutter provides. For this open VS Code and create a folder in it. I have named the folder “FirstProject” and saved it on the desktop. Now from the View option in the menu bar in your VS Code select the command palate and then search for “Flutter New Application Project”. Select that and give a name to your project. (I named my project as first_project).
13. This will open a new flutter project for you with all the folders and files created and a default app written in the main.dart file inside your lib folder. Now open a PowerShell terminal from the menu bar in VS Code and type the command “flutter run”. This should start building the app in your android (make sure your android is still connected to your device).
14. But sometimes this does not work. The command shell might throw you a long error that it cannot find your java class. Not to worry, this can be easily resolved by editing the distribution Url variable in your gradle-wrapper.properties file.
15. Change,
distributionURL=“https\://services.gradle.org/distributions/gradle-5.6.2-all.zip”To
distributionURL=“https\://services.gradle.org/distributions/gradle-6.3-all.zip”16. Now running “flutter run” in the command shell might successfully start building your app but it may show “Taking longer time than expected”. In this case, you have to go to the android folder in your project folder (cd android) and then run
./gradlew clean and
./gradlew buildone after another. Do not worry, it will take some time to set up.
17. Now move back to your project folder and run “flutter run” in the command shell. It will take some time to install and run the app on your mobile but do not worry, it will get installed all by itself and start running on your mobile.
18. The demo app will open and will look something like the screenshot I have shared. That is it. You are all up and ready to start developing apps using flutter in VS Code!
