Essential VS Code extensions for Flutter

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.

Cut through the noise of traditional error reporting with LogRocket

LogRocket is a digital experience analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your applications.

Then, use session replay with deep technical telemetry to see exactly what the user saw and what caused the problem, as if you were looking over their shoulder.

LogRocket automatically aggregates client side errors, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to tell you which problems are affecting the most users and provides the context you need to fix it.

Focus on the bugs that matter — try LogRocket today.