7 Must-Have VS Code Extension for Flutter Development

Vision for Flutter is to provide a portable toolkit for building beautiful experiences wherever you might want to paint pixels on the screen. Flutter supports mobile platforms like Android, iOS, and of course Web.

Let us discuss what we planned for! Here are the 7 must-have VS Code extension for Flutter.

1. Flutter & Dart

Must obvious but important ones. This extension provides helpful tools like code refactoring, wrapping with frequently-used widgets, hot reload, and also live debug. There are many such helpful inbuilt features in our pocked with these extensions.

2. Flutter Awesome Snippets

This is a very handy extension, there are many shortcuts for various things like importM to import material package. mateApp to build a MaterialApp Widget etc. This is one of must-use extension to reduce time waste during daily development.

According to Visual Studio Marketplace

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.

3. Error Lens

This is probably the most underrated one. It highlights the line where the compiler error occurs and print the language-specific message inline. Here is the best part, this extension is not only limited to Flutter.

For funky devs; The color to be shown can be customized in settings.json file. This will give a more appealing look to your errors!

4. Bracket Pair Colorizer 2

This extension as the name suggests colors the pair of brackets of a method, widget, constructor! In Flutter where we have to deal with deeply nested widget trees, this seems to be a lifesaver for finding common bracket misplacing. The user is independent to define which tokens to match, and which colors to use.

5. Pubspec assist

Bored with visiting pub.dev to add dependencies in your project!

This extension directly searches the dependencies from the VS Code itself and adds them to pubspec.yaml file.

However, there is a catch! Pubspec assist get you the latest version of whatever package you are looking for. In my case, I usually prefer looking at some recently launched versions while adding new dependencies. But this is my personal catch and most of you won’t be affected by this feature.

6. Better Comments

This extension allows you to write comments by annotating with an alert, query, informational, TODOs, etc. This is very helpful while working in a team, which is in the majority of cases. Though I genuinely want every IDE to come inbuilt with this feature, till then we have to stick to such awesome extensions!

7. Image Preview

I love this extension!

While working with Flutter it is a quite difficult task for me to immediately insert the name of an image file in my code. I am fond of using long names for my image. This extension came to my rescue when I started working with Flutter. This extension simply shows image preview in the editor’s gutter and on hover. Extremely useful to check if we haven’t made any typo in the image’s path. This is a preview from the marketplace:

Did I miss any extension? Let me know in the comments.

Do clap if you find this useful. You can also follow me on Youtube or join our channel on Telegram here.