Using Visual Studio Code to Open a Flutter Project

In the earlier tutorial, we learnt how to clone a repository. Once cloned, we should open the code using either a code editor or an IDE. In this tutorial, we are going to use visual studio code to open a flutter project.

There are many customisable code editors such as Sublime Text and Atom out there, but we’d cover this tutorial using Visual Studio Code. It has many nice built in plugins which helps in seamlessly developing flutter applications.

You can download and install Visual Studio Code on your machines from here.

https://code.visualstudio.com/download

Launch VS Code and click on File > Open.

Select the location of the flutter project folder which was cloned, which in this case is flutter_containers.

Once open, the Explorer is on the left side of the editor. Look for the lib folder and select the main.dart file. You should see the code editor open like this.

There’d be many errors highlighted, which is normal at this point. We’ll

Visual Studio Code Flutter Plugins

VS code has an extension feature which allows the code editor to be powerful and flexible.

To support flutter application development, click on the extensions option and search for flutter extension and install it.

Download Flutter Packages

The errors shown earlier was due to missing flutter packages. Usually when your flutter code is committed to a repository, some parts of the project are ignored as dictated by a .gitignore file.

The .gitignore file for the flutter_containers project can be found here.

As shown, the packages are ignored as stated in line 29 of the .gitignore file.

To rebuild the packages, launch a terminal.

Run the flutter pub get command to get all related packages for the project. The list of related packages are listed in the pubspec.yaml file. The pub get command refers to the list here and get related packages.

All the errors should have now disappeared.