Introduction
Flutter is flexible enough to let us write apps using any text editor or IDE. However, it’s a much better development experience to work with the IDEs for which the Flutter Team provides plugin support. Features like code completion, syntax highlighting, widget editing assists, and run and debug support make the app development process more efficient and hassle-free.
In this article, I’ll walk you through some useful VS Code extensions to supercharge your Flutter development workflow. Here are the types of extensions we’ll cover:
- Essentials
- Code Snippets
- Pubspec Helpers
- Testing
- Architecture
Essentials
Dart and Flutter
Dart and Flutter extensions enable support for the Dart programming language in VS Code. We get utilities to effectively edit, refactor, and run Flutter and Angular web apps.
Developed and maintained by the Flutter team themselves, these extensions provide a host of features like hot reload and restart, code completion, and several debugging options.
These features impact the development experience significantly. Therefore, they are an essential pick for anyone developing apps with Flutter.
Code Snippets
Awesome Flutter Snippets
Awesome Flutter Snippets is one of the most popular extensions after the official releases from the Dart team. It features a number of snippets for writing code in shorthand. Examples are mateapp
for Material App, statefulW
for Stateful Widget, and initS
for InitState.
Flutter Tree
Flutter Tree provides a very short and neat way to write widget trees.
Here’s how it looks:
Container( child: Column( children: [ Child1( child: Child2, ), Child3(), ], ), ), // Can be replaced by the following: Container>Column[Child1>Child2,Child3]
Once you press enter, entire widget tree code is laid out perfectly:
Dart Barrel File Generator
Dart Barrel File Generator does what its name suggests: it generates barrel files for folders containing Dart files. A barrel file is a file where we write the export
statements to export other files in the library or folder. This makes importing packages easier, as we’ll have to import only one file instead of multiple.
This simple extension generates barrel files for any specific folder. Just right click on the desired folder and choose one of the two options to generate the file:
Pubspec Helpers
Pubspec Assist
Pubspec Assist is definitely one of the most useful extensions. It lets us install and update any number of packages with a simple command.
We can easily search for a package even when unsure of its exact name, because Pubspec Assist is intelligent enough to find the right package:
Pubspec Dependency Search
Pubspec Dependency Search covers an entirely different use case than the previous extension. It helps us search for packages simply by clicking on the package name or with a command:
In the first image, we’re taken to the relevant package’s page in pub.dev. In the second, the search results page is shown.
Testing
Better Flutter Tests
If you procrastinate writing tests, this one is for you. For any file, Better Flutter Tests generates a corresponding test file with a boilerplate in place. If the name or folder structure of the project file is changed, the relevant changes are made to test file as well. This keeps everything in sync and integrity is maintained.
You can see this in action with the following gifs:
Architecture
bloc
The only downside to BLoC architecture is the boilerplate it comes with. Thankfully we have bloc to generate everything from files to template code. It also supports the Cubit package and features various snippets:
Flutter Provider Snippets
Flutter Provider Snippets is a collection of snippets that help us write classes and methods which are commonly used in Provider architecture. Examples include consumer
, selector
and proxyProvider
.
flutter_mobx
Flutter_mobx provides snippets and tools that help during code refactoring. It also makes running code generator more intuitive.
GetX Snippets
GetX Snippets is powerful, just like the package itself. This collection offers snippets for everything from generating models to pages, to complex widgets like ListView or Forms. If you work with GetX library, this extension can greatly accelerate your workflow.
Conclusion
This article covered the most useful VS Code extensions that are a must-have for any Flutter developer. I’m sure these will make you more efficient and make your development time worthwhile.
Get setup with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()
must be called client-side, not server-side. - (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>