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.
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.
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
, 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 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.
2. Pubspec assist
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 .
3. bloc
This is a lightweight extension created by
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.
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
Other than this there are many snippets also which you can use while coding such as bloc, blocprovider, etc.
4. [FF] Flutter Files
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.
5. Flutter Tree
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]
6. Flutter Intl
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
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.
8.Dart Getters And Setters
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.
9. Bracket Pair Colorizer 2
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?
10. Material Icon Theme
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.
11. Image preview
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.
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.
13. Better Comments
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.
14. Error lens
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.
15. Todo Tree
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.
Bonus Extensions
Here is a list of some other extensions which will help in development as a whole.
1. Live Share
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
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.
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.
4. Polacode-2020
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.
5. GitLens — Git supercharged
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.
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.
