Flutter — Visual Studio Code Extensions for Fast and Efficient Development

Ganesh .s.p
Oct 15 · 10 min read
Image for post
Image for post

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
Image for post

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
Image for post

2. Pubspec assist

Image for post
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
Image for post

3. bloc

Image for post
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
Image for post

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
Image for post

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
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
Image for post

5. Flutter Tree

Image for post
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
Image for post

6. Flutter Intl

Image for post
Image for post

This helps to create a binding between your translations from .arb files and your Flutter app. It generates boilerplate code for official Dart Intl library and adds auto-complete for keys in Dart code.

How to use it?

Open the Command Palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and search for the Flutter Intl: Initialize command. By default en locale is added by auto-creating a file lib/l10n/intl_en.arb. You can add more locales with command Flutter Intl: Add locale.

7. Json to Dart Model

Image for post
Image for post

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

This library is 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. You can convert from clipboard or from a file.

How to use it?

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.

Image for post
Image for post

8.Dart Getters And Setters

Image for post
Image for post

Using this extension, you can easily create getters and setters for all the required variables.

Just select the variables for which you need getters and setters and then right click and choose Generate Getters and Setters option.

Image for post
Image for post

9. Bracket Pair Colorizer 2

Image for post
Image for post

Often we get lost in the maze of nested widget trees and nested classes, spending a lot of time to find the bracket pair. This extension makes it easier to find the bracket pair by color coding it. You can customize the colors and a lot of other features related to brackets and display of active scope. It also provides keyboard shortcuts for expanding (shift+alt+right) and undo (shift+alt+left) of bracket selection .

How to use it?

Image for post
Image for post

10. Material Icon Theme

Image for post
Image for post

Material Theme Icons is use to show attractive icon theme to the folder which look attractive. It also makes it easier to identify the files and folders.

How to use it?

Launch command palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and type Material Icons, choose Activate Icon Theme. After activation, the icons will appear in your explorer sidebar. It has lots of customizations such as you can change the color, etc.

Image for post
Image for post

11. Image preview

Image for post
Image for post

This is a very cool extension which shows image preview on hover and also on the gutter which can come in handy when you are working with a lot of images. You can preview the following file types :PNG, JPEG, JPG, GIF, SVG. This helps us from doing any mistakes with respect to the image path or names. If you hover on the path , the extension provides a link to the file in the project structure and its dimensions.

Image for post
Image for post

12. Color Highlight

Many times we work with different colors and this extension comes in handy to see the color which is given by styling the color in our code itself.

Image for post
Image for post

13. Better Comments

Image for post
Image for post

This is another popular extension used by VS code developers. It helps in creating colorful comments which actually makes comments more readable. This helps in maintaining the code comments in a better way. Comments helps other developers in the team or our future self. You can write TODOs in the comments which helps in future to not miss any important works. In the comments you just have to start with * or ! or ? or TODO and automatically it will have a particular color.

Image for post
Image for post

14. Error lens

Image for post
Image for post

Error lens helps making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Image for post
Image for post

15. Todo Tree

Image for post
Image for post

Todo Tree by Gruntfuggly comes very handy, not only in flutter, but in VS Code in general. It shows all the TODO and FIXME tags in your code in a Treeview in the explorer, thus helping us directly address them without searching for them manually in the code, saving a lot of time.

Image for post
Image for post

Bonus Extensions

Here is a list of some other extensions which will help in development as a whole.

1. Live Share

Image for post
Image for post

It’s a must have when you want to collaboratively edit and debug a project or a file with others in real-time. This has come in handy especially during WFH scenarios and also for remote works.

You can share your code, terminal and server with other users and if you use the live audio extension then you can even add audio to your communication.

2. CodeStream

Image for post
Image for post

CodeStream is a developer collaboration platform that integrates all of your essential dev tools, such as GitHub, GitLab, Bitbucket, Slack, Teams, Jira, Trello and more, into VS Code. CodeStream reduces the context switching and helps increase developer productivity by bringing code review into VS Code.

This extension helps a lot if you have a team of developers and you are collaborating with them regularly.

Image for post
Image for post

3. Path Autocomplete

This is very useful extension where it will give you path completions for your files or folders. This makes it easier to add images or any resources to our files.

Image for post
Image for post

4. Polacode-2020

Image for post
Image for post

This is useful if you write articles or tutorials. This extension can help get you beautiful screenshots from your code. There is an older version also which doesn’t work with VS Code 2020.

How to use it?

Launch command palette (by default, Ctrl+Shift+P on Windows, ⌘+Shift+P on Mac) and type Polacode then select the code you want a screenshot for.

Image for post
Image for post

5. GitLens — Git supercharged

Image for post
Image for post

It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Image for post
Image for post

I hope I have covered all the extensions which I could find and thought are mostly useful, follow me for more tips, tricks and flutter stuff. There are a ton of useful keyboard shortcuts or tips which I have covered in a different article.

If you have any other extensions or tips for Visual Studio code, feel free to comment below and let me know.

If you liked this article, please support me by clapping your hands👏 as many times as you can. Psst… you can go up to 50 times and I would be more motivated to bring more such articles in the future.

Hi, I am Ganesh S P. An experienced Java developer, extensive creative thinker and an entrepreneur and a speaker, now venturing into the world of Flutter. You can find me on LinkedIn or in github or follow me in twitter. You can know more about me from here. In my free time I am a content creator at GadgetKada. You could also mail me at ganesh.sp006@gmail.com to talk anything about tech.

Image for post
Image for post

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store