How to setup Flutter in VS Code
Before starting any new framework or language, we must decide what platform we'll be making use of. Newer platforms are released every coming day, and it's hard to pick one from a heap of suggestions. When it comes to Flutter, VS Code and Android Studio are two obvious choices.
In this Answer, we'll be learning how to set up Flutter in VS Code since it's both easy and quick.
Visual Studio Code
Before we begin making Flutter applications on our machine, let's ensure we have the latest version of Visual Studio Code installed.
What is Visual Studio Code exactly?
In easy words, Visual Studio Code, also known as VS Code, is a lightweight code editor that allows developers to write and edit code for various programming languages. The good thing is that it comes with features like code highlighting, auto-completion, debugging tools, and extensions for quite a lot of aspects.
You can download VS Code from its official website.
Note: Download VS Code here.
Downloading Flutter
Once you're sure your VS Code has been downloaded and updated, you will have to download Flutter.
Note: Download Flutter here.
Flutter in VS Code walkthrough
Having completed our initial downloads, we can now focus on how to use Flutter in VS Code. To ensure a smooth process, we've laid out the steps for you.
Installing Flutter and Dart plugins
We will start by opening VS Code. Then, we will follow these steps to install the Flutter and Dart plugins.
Open VS Code's Command Palette by clicking on
View > Command Palette....
Type "install" in the search field and select
Extensions: Install Extensions.
In the extensions search field, type "flutter" and select "Flutter" from the list. Click on "Install" to install both the Flutter and the required Dart plugin.
Flutter Doctor
Next, we will validate our setup using the Flutter Doctor.
Open VS Code's Command Palette again by clicking on
View > Command Palette....Type "doctor" and select
Flutter: Run Flutter Doctor.
Review the output in the "Output" pane to check if there was any unexpected error or not. Also, don't forget to select Flutter from the dropdown in the different Output Options.
Note: Flutter Doctor is a command-line tool provided by Flutter's SDK. It's used to check the status of Flutter installations and the development environment.
End notes
Congratulations! You can now build applications in Flutter and seamlessly run them in VS Code following the above-mentioned steps.
Here's how to create a project in Flutter.
Note: Explore the Flutter series here!
How well have you understood the process?
Why do we run Flutter Doctor?
Free Resources
