5 Amazing Flutter VSCode Extensions

Image from Google

Visual Studio Code is one of the most common code editors among programmers. The numerous extensions that speed up the development process are one of the reasons for VS Code’s popularity.

Here is the list of the 5 amazing VSCode extensions I use for my Flutter app development.

Flutter

A must-have extension for anyone that want to develop Flutter applications with VSCode.

This extension adds support for effectively editing, refactoring, running, and reloading Flutter mobile apps, as well as support for the Dart programming language.

Awesome Flutter Snippets

Awesome Flutter Snippets according to its overview on VSCode market place is a collection of commonly used Flutter classes and methods. It increases your speed of development by eliminating most of the boilerplate code associated with creating a widget. Widgets such as StreamBuilder and SingleChildScrollView can be created by typing the shortcut streamBldr and singleChildSV respectively.

Pubspec assist

Pubspec Assist is an extension that allows you to easily add dependencies to your Dart and Flutter project’s pubspec.yaml, all without leaving your editor.

Pubspec Assist will get you the latest version of whatever package you are looking for, puts it in your pubspec.yaml and formats the file automatically. If you already have the package in your pubspec.yaml, Pubspec Assist automatically updates it to the latest version for you. It also supports dev_dependencies!

Usage

Simply open the Command Palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and search for "Pubspec Assist".

Pubspec Assist

Flutter Tree

This is an extension for Flutter to build basic widget tree with nice syntax. This makes making widget trees easier, but it comes with its own syntax as shown below:

OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild]

Code generated

OneChild(
    child: MultipleChild(
        children: <Widget>[
            OneChild(),
            MultipleChild(
                children: <Widget>[
                    OneChild(),
                    OneChild(),
                ]
            ),
            OneChild(
                child: OneChild(),
            ),
        ]
    ),
),

Flutter Tree

Json to Dart Model

Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON.

This library is also designed to generate flutter-friendly model classes following the flutter’s doc recommendation. Extension supports for both serializing JSON manually and serializing JSON using code generation libraries.

Usage

Open the Command Palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and search for the Json to Dart: Convert from Selectioncommand for converting from a selected text.

Json to dart Model

If you know about any other Visual Studio code extensions or suggestions, please let me know in the comments section below.
If you enjoyed this post, please show your appreciation by clapping 👏 as many times as you can. You can go up to 50 times, which will inspire me to write more similar posts in the future.