The Ultimate VS Code extensions for working with Flutter
Developing Apps is a difficult and tedious task but with the use of some awesome VS Code Extensions, it can become a fun and interesting process. But finding the useful Extensions and understanding them is a tedious process so I created the Ultimate Flutter Extension Pack. It contains all the best extensions that will make your app experience more Fluttery.
To get started, download the Extension Pack from VS Code by following the GIF below.
I hope that you followed the above GIF and downloaded the Extension Pack, now I will guide you through each Extension in the Pack.
Note — The Extension Pack doesn’t contain any Theme Extension because different people prefer different themes for their Editors.
1) Flutter & Dart (By Dart Code)
In your Flutter Journey, this is the combo Extension you need to get started. This extension adds support for editing, running, debugging, refactoring, and reloading flutter apps.
2) BLOC ( By Felix Angelov)
The BLOC is one of the many StateManagement techniques you can use in Flutter. This extension helps you create Bloc folder which contains the necessary dart files you need to manage the state of the app.
3) Flutter Color ( By circle code solution)
This amazing Extension adds a small square box before the hex code helping you understand the color of the hex code.
4) Flutter Widget Snippets ( By Alexis Villegas Torres)
This is one of the most used extensions by the Flutter community. This extension saves a lot of time because it contains keywords that create the entire widget for you. Want to create a Stateless Widget? Just type stless and press Enter and you have the entire Stateless widget created for you.
5) Pubspec Assist( By Jeroen Meijer)
As a coder, your Editor should be able to do all the tasks for you but when it comes to adding a flutter package, you need to open the browser and search for the latest package before adding it. This is where this extension comes into play. As the name suggests, Pubspec Assist assists you in calling the necessary dependencies from the command palette itself. The gif below explains how it works.
6) Pubspec Dependency Search( By everettjf)
This extension helps in searching the dependency name in pub.dev. Just go to your pubspec.yaml file and you can see a hyperlink created over your package. If you click on the text, you will be redirected to the package page.
7) Bracket Pair Colorizer ( By CoenraadS )
When your code starts becoming bigger, differentiating the different widgets become difficult. That’s where Bracket Pair Colorizer comes, it marks every bracket with a different color and helps in improving the code readability.
8) Better Comments ( By Aaron Bond)
This extension helps in highlighting comments in different colors. You can highlight different parts of different codes and what is their functionality which helps improve code readability.
9) Error Lens ( By Alexander)
This Extension is a lifesaver for every Coder. Everyone comes across a bug that crashes the whole app because of a missing closing bracket or a semicolon. This extension highlights the error line and mentions the reason causing the issue.
10) Material Icon Theme ( By Philipp Kief)
Who doesn’t love a beautifully crafted icon set? This extension brightens the Files and Folders in the Explorer bar by giving it beautiful icons.
11) Snapcode ( By moyu)
This is one of the extensions I use whenever I am stuck and can’t figure out what is wrong with the widget. This Extension creates a beautiful image of the selected code and saves it on your PC. You can share this image in forums or Facebook coding groups where code format is not accepted and get faster replies as images tend to get more engagement than texts.
12) Todo Tree ( By Gruntfuggly)
While working in a team, multiple people create TODO for their coworkers, and finding the one you need to work on becomes difficult if you have to go through every file. This is where Todo Tree cascading helps out. Just click the Todo Tree icon on the Activity Bar and you can view every single TODO in the project.
13)Visual Studio Intellicode ( By Microsoft )
Visual Studio Intellicode is the AI assistant of VS Code. Creating a widget? Just press Ctrl+Space and Intellicode will give you a ton of suggestions to increase your productivity.
14) Git Graph ( By mhutchie )
Git graph shows the different branches in your repository and marks them with different colors. With this tool, you can quickly revert back to a commit or checkout on the latest branch.
15) Git History( By Don Jayamanne )
Git History gives you a detailed History of every commit made in your repository.
16) GitLens-Git supercharged ( By Eric Amodio)
This neat little Extension shows the changes made in the file by mentioning the name and the time when someone made changes to the code.
