12 most useful Visual Studio Code extensions for Flutter development
In programming, just like in real life, our individual skills can’t always be used to solve a given problem efficiently but we can search for and use tools that will do that for us. In this blog post, I’d like to share with you a couple of useful VS Code extensions that I use in my daily development process and find to be of great value.
Flutter Widget Snippets
This extension contains a number of useful code snippets which can in turn speed up your development process. Here is a list of the most interesting ones. For a full list of all the snippets please visit the extension’s page.
Awesome Flutter Snippets
Another snippet extension which adds a couple of other widget and builder snippets. Below are some of the most interesting. For a full list of all the snippets please visit the extension’s page.
bloc
This extension is a must-have for everyone that is already using the bloc architecture and package by Felix Angelov. It’s most important features include:
- Auto generating classes like blocs, states, and events
- A list of code snippets for creating bloc specific classes
Here is a list of the most interesting snippets provided by this extension. For a full list of all the snippets please visit the extension’s page.
[FF] Flutter Files
This extension enables the creation and usage of BLoC class templates in your project. It works like this:
First, create a template directory in your project. Then modify or add templates according to your needs.
Choose from a variety of options, which template file or pack should be created, then specify the name of the generated package, and choose which template should be used by the generator. Voilà! Your classes have been generated based on the selected template.
flutter-stylizer
This extension will help you and your project teammates organize your Flutter classes in a consistent manner by defining a common order in which their different elements should be displayed. The list of supported elements is the following:
- Public constructors
- Named constructors
- Public, static & instance variables
- Private static & instance variables
- Public override methods
- Public other methods
- Build method
The order in which these elements should be sorted is fully customizable.
Bracket Pair Colorizer 2
This is a simple extension enabling matching brackets to be identified with colors. It can be additionally customized which tokens to match, and which colors should be used.
Better Comments
Just like this extension’s title already states, with it you will be able to form more informative comments, by categorizing them in the following ways:
- alerts,
- queries,
- TODOs,
- any other categories that can be specified in the settings.
Here’s a presentation of how the different categories will look like. If you like you can additionally customize their look in the extensions’ settings.
Pubspec Assist
With Pubspec Assist, it’s possible to search for a given pub package, choose from the results or suggestions, and automatically add the desired package to your pubspec.yaml file without ever needing to leave your editor’s window. You won’t ever need to think about searching for the newest version of a package you always use for your development. It works for both Dart and Flutter projects.
Version Lens
It’s another simple extension for showing the package version information for each dependency package located in your pubspec.yaml file. Here’s an example of how it looks like:
We not only can see what is the newest version that satisfies our current one but with a single click we can upgrade to it.
GitLens
Here are some quality of life extensions for overall development, not only for Flutter projects. GitLens improves the Git capabilities that are built into Visual Studio Code. Here’s a couple of the features it supports:
- code authorship annotations,
- a current line blame annotation at the end of the line,
- a Repositories view to visualize, navigate, and explore Git repositories,
- a File History view to visualize, navigate, and explore the revision history of the selected file,
- a Line History view to visualize, navigate, and explore the revision history of files,
- a Search Commits view to search though commit histories,
- a Compare view to visualize differences between branches, tags, commits,
- and much more.
Todo Tree
The main function of this extension is to search your workspace for code comments with tags like TODO or FIXME, and then displaying them in a separate panel in the editor’s sidebar. From this place, you can simply navigate to each one by selecting it from the tree view.
Live Share
Let’s simply put it this way: Live Share is like a multiplayer mode for your Visual Studio code project. With it, you can collaboratively edit and debug your project in real-time. It enables the sharing of your project via a session with another developer. Each programmer can retain their settings and editor preferences while working on the same project. It can be a perfect solution in cases when you have a nasty bug in our app and are for example working remotely, that way you can perform peer to peer programming. It’s also a great tool for teaching another person how to code.
Conclusion
I hope that some of these extensions will ease your development process by not only taking off the boring parts of it but most importantly making the overall coding work more enjoyable. And if you haven’t found your dream extension yet be aware that you can always code it yourself. But that’s another story.
Deviniti is your guide to the universe of digital transformation and enterprise software. Check out who we are and what we can do on our website.
If you want to learn more Flutter tips and tricks, make sure to check out other articles available on Deviniti Technology-Driven Blog:
