Hello World. Let's learn about VS Code and Flutter.

Flutter is Google’s open source framework for building beautiful UI that is compiled natively to its respective mobile platform. Flutter continues to grow and supports the web and desktop in beta and alpha stages respectively. This makes flutter an good choice to develop cross platform applications from a single code base.

Flutter apps can be built using Android Studio or VS Code. Let us look at how VS Code enables building flutter apps much more easily.

The Flutter team has developed two extensions for VS Code. They are

1. Dart
2. Flutter

By installing these two plugins we are ready to build flutter applications on VS Code. (Note: Make sure to follow the set up instructions for flutter this article assumes that flutter installation is complete)

Let’s look at some of the different capabilities of these extensions.

Command Palette

The extension supports running various operations.

This command palette is a part of VS Code and can be opened easily using

1. cmd + shift + p on macOS
2. ctrl + shift + p on Windows and Linux.

These are the operations we can run without being in a Flutter project

1. Creating a Flutter project
2. Upgrading Flutter SDK
3. Running Flutter doctor to check for any issues with Flutter.

Inside a flutter project the extension supports a lot of different options.

1. Clean Project: runs flutter clean
2. Get Packages: fetches the packages listed in pubsec (runs flutter pub get)
3. Upgrade Packages: updates the packages listed in pubsec if it is outdated. (runs flutter pub upgrade)

In debug mode of a project flutter

1. Outline View: Give an overview of the widget tree
2. Open Dart/Flutter Dev Tools

Debugging

Flutter Debugging is simple right from the command line. Developers can hot reload and hot restart right from the command line. So why use VS Code? Debugging from VS Code allows hot reload and hot restart. The files can be autosaved and on save hot reload kicks in by default in debug mode. Breakpoints and inline breakpoints are supported and allow easily to identify the flow of control and data through the code. Debugging is easily enabled using the function key f5. The other ways debugging is easier is a developer can enable

1. Widget Inspector: To click on a widget and identify the space it occupies and the place it is located in the widget tree.
2. Repaint Boundary: To view the part of the screen that is rebuilding on state change.
3. Debug Painting: To view the entire screen pixels and how it is drawn to check the size of widgets, padding, margins and so on.
4. Baseline Painting: To view the baseline for text in widgets.

Refactoring

Refactoring flutter/dart code is super simple in VS Code. The shortcut for refactoring code is

1. ctrl + . for windows & linux
2. cmd + . for macOS

This shortcut allows refactoring code in multiple ways such as

1. Importing the correct file for the code
2. Converting stateless to stateful widgets
3. Refactoring the widgets by allowing to wrap the current with other widgets like containers, padding or a custom one and more.

The code can quickly be formatted using the shortcut key alt + shift + f on macOS.

The import statements and unused imports can be formatted and removed as required by using the shortcut key alt+shift+o.

identifiers can easily be renamed/refactored using the function key f2.

Snippets

Three builtin useful snippets

1. stless creates a stateless widget
2. stful creates a stateful widget
3. stanim creates a stateful widget with an animation controller

Conclusion

As we can see from the different capabilities VS Code and Flutter work great together and make developing Flutter applications easy. Every developer can take the benefits of these extensions to help them develop their application quicker.