Flutter in VS Code Studio and USB debugging

Photo by Denny Müller on Unsplash

You may have gotten adapted with Visual Studio Code as you suitable IDE for writing code like me.

To be honest many prefer Android Studio for developing apps using flutter. So to accomplish the above written Title we need to follow the steps:(This article contains only textual procedures)

Have a stable internet connection on setting up things for the first time. I applied the following steps in my devices, Windows 10 and Android in smartphone. Any error due difference of OS may not be resolved by them.

Setting up VS Code

1. Download and install Flutter SDK. know how

2. After extracting the zip, navigate to bin folder inside the flutter SDK folder, copy the directory after opening bin folder and add it to your environment variables in PATH. know how to add env variables . It should look somewhat like this C:/Flutter/bin

3. Install Flutter and Dart extensions for VS code.

4. To make things easy we need to download and install Android Studio(click here). Keep track of the directory where you are installing Android Studio.

5. Navigate to the folder of Android Studio, open it and locate jre folder(create a copy of this jre folder if in case you want to uninstall Android Studio later). Open jre folder and inside it open bin folder. Copy the directory of bin folder to environment variables in PATH just like in step 2. Your env variables PATH for jre should look somewhat like this C:/Android/Android Studio/jre/bin

6. Run android studio and you will be promoted to install android SDK and many other stuffs, install all of them. Keep in mind of the directory of installation for android SDK.

7. Open Powershell/Command Prompt/Terminal and run command flutter doctor. Look for section Android toolchain, if it doesn’t shows any error then fine. Else if it shows can’t find android SDK simply run command flutter config — android-sdk <path-to-your-android-sdk-path> where path will contain the directory where your android SDK is located done in step 5. Paste the path without<>, should look somewhat like flutter config — android-sdk abc/xyz/sdk

8. Run command flutter doctor again and check for any errors in android toolchain only. Resolve license acceptance if prompted. Rest all errors and warnings are fine. Even license warnings won't create any problems.

9. Now you can uninstall Android Studio and it won’t affect your code running. Just make sure you have these 3 folders with you viz. Flutter SDK, Android SDK, and jre after uninstallation.

USB Debugging for in-device demo of Flutter code

You can also use Android Emulator for visualizing the UI and app features developed. Or else you can use you smartphone for visual of demo. It is fast and don’t require graphics processing.

1. Open VS code and then open a new terminal. Make sure you have a folder for you flutter project and working directory set to that in terminal
2. Run command flutter create myproject to create a new project. Where myproject is given name of project you can add anything of your choice.
3. After the project is created, enable developer options in mobile.(know how). For ios users you can search on internet.
4. Enable USB debugging in developer options and also stay awake while charging for convenience. Also make sure your USB connection type is Ethernet. You will get this options by scrolling down a little from USB debugging.
5. After this you should get a prompt to authorize your device to be connected to your computer. The prompt will be of RSA Fingerprint, allow it.
6. Now you smartphone will be shown on your available devices in VS code down in status bar. You can also run command flutter devices and it should also be shown there.
7. Now if everything is all right, run command flutter run and it will run the app in your smartphone, make sure your computer is connected to internet for first time, it will take few minutes so have patience. You will get text in terminal stating you app is visible sth like that upon completion. Press q to quit.

For any error that persist even after following the steps try googling them.😅It surely will resolve it.

That was all for setting up VS code and USB debugging for visualization. Thanks for reading. 😀