Flutter  - Visual Studio Code Extensions for Fast and Efficient Development

Flutter  - Visual Studio Code Extensions for Fast and Efficient Development

Flutter — Visual Studio Code Extensions for Fast and Efficient Development. Extensions are a quick way to get your work done. A lot of extensions help in reducing repetitive work, reduce boilerplate code, etc. Some other extensions help in assisting the development process and even help in faster and efficient development.

Extensions are a quick way to get your work done. A lot of extensions help in reducing repetitive work, reduce boilerplate code, etc. Some other extensions help in assisting the development process and even help in faster and efficient development.

If you are looking for keyboard shortcuts you can checkout this article of mine Flutter — Visual Studio Code Shortcuts for Fast and Efficient Development.

How to install extensions?

First a quick recap on how to install extensions. Inside VS Code, click extensions on left side, and search for the extension and click on install.

Image for post

How to install extensions

First of all I hope you have Dart and Flutter Extensions enabled, if not you can get them from here : Dart and Flutter. These provide a lot of features and usually when you start working with flutter, you would install these definitely.

Now let’s jump into the extensions and see what all wonders we can do.

1. Awesome Flutter Snippets

A great extension provided by Nash, who has been associated with flutter from the beginning and is a key contributor in flutter community. This extension is up to date with no known issues and in case of any issues you can directly reach out to Nash for any help.

Awesome Flutter Snippets 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.

As of the latest version 2.0.4, it has a total of 37 shortcuts some of them are statelessW for Stateless Widget and statefulW to create a Stateful Widget,etc.

How to use it?

Just type the shortcut (or start typing it & select from the code assist) and press enter/return. Let’s create a stateful widget and name it Test.

Image for post

Using Awesome Flutter Snippets

2. Pubspec assist

Image for post

This is the one of the most famous and used extension created by Jeroen Meijer which is suggested by a lot of top flutter developers. This make it easier to add pubs to pubspec.yaml, all without leaving your editor. This only adds the latest version, hence it can also be used for updating existing pubs.

How to use it?

Simply open the Command Palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and search for "Pubspec Assist", type the package name and press return; it will take some time to search and provide the results.

Then, choose any of the available options .

Image for post

Using PubSpec Assist

3. bloc

Image for post

This is a lightweight extension created by Felix Angelov who is also a very reputed contributor among the Flutter community. This gives support for the Bloc Library and provides tools for effectively creating Blocs and Cubits for both Flutter and AngularDart apps.

How to use it?

Commands

You can activate the commands by launching the command palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and running entering Bloc: New Bloc or you can right click on the directory in which you’d like to create the bloc/cubit and select the command from the context menu.

Image for post

Using bloc — commands

Code Actions

There are a few code actions provided by this extension which can be used as in the gif below. Select the widget you want to wrap and then right click and select the required code action. Example:Wrap with Bloc Builder

Image for post

Using bloc — code actions

Other than this there are many snippets also which you can use while coding such as bloc, blocprovider, etc.

4. [FF] Flutter Files

Image for post

This extension allows to quickly scaffold flutter BLoC templates in VS Code project.

How to use it?

Right click on a file or a folder in your current project. You can find multiple options been added to the context menu such as New Bloc, New Event, New Model, New Page, etc.

Image for post

Using Flutter files

5. Flutter Tree

Image for post

This is to build basic widget tree with nice syntax. This makes making widget trees easier, but one problem is you will have to learn one more new syntax which is as follows :

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

Image for post

Using Flutter Tree

flutter vscode programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

Hire Flutter Developer

Are you looking for next-generation mobile applications to increase business benefits? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")** is one of the most reputable mobile app development company, which provides Flutter...

Hire Dedicated Flutter Developer

Are you planning for creating a native-like cross-platform app for your venture? **[Hire Dedicated Flutter Developer](https://hourlydeveloper.io/hire-dedicated-flutter-app-developer/ "Hire Dedicated Flutter Developer")** to develop cross-platform...

Flutter App Development | Skenix Infotech

Hire Flutter Developers from foremost Flutter app development company, Skenix Infotech to get a full spectrum of cross-platform flutter development services.

Flutter App Development Trends 2020

As the new decade dawns upon us, a slew of technologies has been making a lot of noise to grab the developers’ attention. While native app development is going strong, the trade winds are now blowing towards going cross-platform.