Dart and Flutter VS Code extensions for speedy app development
There are plenty of code editors out there these days, but VS Code has increased in popularity over the last few years, in large part to the extensive community supported extension marketplace that allows you to turn a single text editor into a powerhouse coding environment. Today, let’s discuss some of the best Flutter and Dart extensions currently in the marketplace to build the code editor that will let you fly during app development.
Language Necessities
Flutter & Dart
At the bare minimum, I suggest installing these two extensions. Together they will provide dart and flutter code completion, syntax highlighting, default snippets, quick refactoring options, and debugging/running Flutter apps. Anything past this is optional and only adds to the speed of development, which starts at a very fast base level with these two extensions.
These packages add all the necessary support for Flutter and Dart development and it’d be extremely beneficial to become deeply familiar with all the support they bring. I’m still continuing to learn all the abilities, but my current favorite and most used feature right now is the widget refactor menu that allows quick removal, wrapping of common widgets or the ability to extract values into a separate location. To speed this up even more, I’ve mapped a few of these to keyboard hotkeys that allow me to skip the menu all together.
Speed Widget Building
Flutter Awesome Snippets & Flutter Widget Snippets
These are the two most popular Flutter and Dart snippet extensions currently in the marketplace. There are some overlapping snippets with the Dart & Flutter defaults as well as with each other, but I’ve found that using them together is efficient and powerful and worth the occasional duplicate snippet in the autocomplete list. Flutter Awesome Snippets tends to avoid the more common widgets and instead provides snippets for some of the more complex or less used pieces that require boilerplate we often forget such as Stream Builder, Animation Builder, and Custom Clipper. Additionally they provide quick method snippets for build, init state, didWidgetUpdate and so forth. Flutter Widget Snippets tends to focus on widgets as well as some dart features. All of their snippets either start with fSnippet or dSnippet like fcol, frow, ftxt or dlist, dset to signify Flutter vs Dart snippets. Print and study both of these snippet lists and development speed will only go up!
Flutter Tree
Some days I love Flutter Tree, other days it gets in my way. Nonetheless, I see why it’s so popular and powerful. It does one thing and it does it well. It allows building out nested widget layouts in a single line of code with a shorthand syntax like this OneChild>MultipleChild[OneChild, MultipleChild[OneChild, OneChild], OneChild>OneChild].
That might be a little confusing at first, but when put into context of Flutter widgets, it makes a little more sense. This extension is the quickest layout builder out there.
The drawbacks of Flutter Tree are the need to learn yet another syntax, need to know the widgets and layout ahead of time, and it sometimes gets in the way of other autocomplete snippets. At the end of the day, I’ve still got it installed and when I know exactly what I need to build or scaffold out, I’m glad to only write a single line of code to create my widget stack.
Dependency Assistance
Pubspec Assist
Pubspec Assist is a quick tool to auto-add a dependency to the pubspec.yaml file by using command Pubspec Assist: Add/update dependencies which accepts a comma separated list of dependencies. Super convenient when adding the latest version(s) of a single dependency or series of dependencies. The downside right now is that it automatically adds the latest version listed on pub.dev, but still worth it to avoid manually searching and adding dependencies.
Version Lens
Version lens is not specific to Dart or Flutter, but has added capabilities around the pub dependency system. It checks the dependency on pub.dev and indicates within the pubspec.yaml file if the dependency is the latest version, and if not, adds a single-click link to update to the latest stable or beta version of that dependency. Super convenient for keeping packages up-to-date without manually checking pub.dev all the time!
Pubspec Dependency Search
I’d say this one is more of a convenience and definitely optional, but it adds a quick search ability within the pubspec.yaml file right above each dependency. I mostly use it to quickly get to the documentation of the dependency in question.
See all three of these pubspec assists in action in the below gif. I first add geolocator package with Pubspec Assist extension, then quickly update to the latest provider package via Version Lens, and finally do a quick one-click search that takes me to the fl_chart pub page with Pubspec Dependency Search. Combine all three of these extensions and dependency management can be a breeze.
Code Consistency
flutter-stylizer
Flutter stylizer provides a quick, semi-customizable way to sort dart files that keeps code consistent across files and projects. The extension allows order customization but by default, below is the order for all dart files. Consistent code is key to being productive in whatever Dart file you work on.
"flutterStylizer.memberOrdering": [
"public-constructor",
"named-constructors",
"public-static-variables",
"public-instance-variables",
"private-static-variables",
"private-instance-variables",
"public-override-methods",
"public-other-methods",
"build-method",
],dart-import
This one is code preference and the extension is simple, but I absolutely love it. By default, the tab completion auto-import from the Dart and Flutter extensions import the full package path of the import needed, even if the file exists in the current project. This extension has two commands, fix imports and fix all imports that converts current project imports to relative imports as well as sorting them. Fantastic!
Bonuses
At this point, the extensions above are plenty when it comes to quickly and efficiently working with Flutter. However, I wanted to drop in a few bonus extensions that are useful depending on the project and some personal preferences.
Dart Boosters
Dart Barrel Files, Json to Dart model, Dart getters and setters, & Dart Data Class Generator
I won’t go into each of these individually, but each one saves a lot of typing! If the project requires JSON api integration, model classes, or exports, these extensions can turn thirty minutes of monotonous typing into a few clicks or commands. Some of these are absolutely magic at time saving.
Architectural Helpers
Flutter has a plethera of architectural patterns that are currently supported and widely used. Luckily, there’s quite a good ecosystem of flutter extensions that support these different patterns and allow quick feature scaffolding or code snippet completion depending on the architecture choice. A few of the top ones include patterns such as bloc, provider, getx, and mobx. Listed below are some of the most downloaded architectural related extensions.
Flutter Files, Bloc, Flutter feature scaffolding, GetX Snippets, Flutter Provider Snippets, Flutter MVVM Architecture Generator, Flutter MVC Generator, Flutter-mobx.
These are just a few of the Dart and Flutter extensions on the VS Code market, but I’ve found they are the most beneficial to my coding environment and allow me to quickly create apps with ease. Hopefully they help boost your own Flutter and Dart coding environment as well. A word of caution from somebody who has made the mistake before—the more extensions you have, the slower VS Code becomes and tends to need more memory, so try to only install extensions that get consistent use. Let me know if you have any other Flutter or Dart extensions that you absolutely love using and couldn’t code without!
** Note: I am not affiliated with any extension in this article. **
