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:
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.
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 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 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.
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 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 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.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ 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>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn how to manage environment variables in Next.js, which influence how an application behaves in different contexts and environments.
useActionState in React: A practical guide with examplesDiscover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.
Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.
Image component to optimize imagesExplore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.
