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:
- Code Snippets
- Pubspec Helpers
Dart and Flutter
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.
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 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 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.
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:
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
Flutter_mobx provides snippets and tools that help during code refactoring. It also makes running code generator more intuitive.
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.
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.
LogRocket: Full visibility into your web apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.