10 Best Visual Studio Code Extensions for Flutter Development
Tags: flutter, dart, mobile, productivity
Published: 2021-06-14 12:17:06

---
title: 10 Best Visual Studio Code Extensions for Flutter Development
published: true
date: 2021-06-14 09:59:21 UTC
tags: flutter, dart, mobile, productivity
canonical_url: https://www.syncfusion.com/blogs/post/10-best-visual-studio-code-extensions-for-flutter-development.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/10-Best-VS-Code-Extensions-for-Flutter-Development-1-672x372.png
---

[Flutter](https://flutter.dev/ "Link to Flutter page") is one of the most popular cross-platform UI frameworks for creating rich mobile, desktop, and web applications. With Flutter users growing tremendously, a vast collection of plugins and extensions are available in the market to help developers increase their productivity. In this blog, I’ll walk you through the 10 finest extensions that I use in the [Visual Studio Code IDE](https://code.visualstudio.com/ "Link to Visual Studio Code") for Flutter development. They are:

- [Pubspec Assist](#pubspec-assist)
- [Error Lens](#error-lens)
- [Flutter Tree](#flutter-tree)
- [Bracket Pain Colorizer 2](#bracket-pair-colorizer)
- [Dart Data Class Generator](#dart-data-class-generator)
- [Flutter Stylizer](#flutter-stylizer)
- [Better Comments](#better-comments)
- [Color Highlight](#color-highlight)
- [Markdownlint](#markdownlint)
- [JSON to Dart Model](#json-to-dart-model)

Hope you’ve already discovered and installed the Flutter and Dart extensions in Visual Studio Code for Flutter development. If you haven’t, you can get them from the Visual Studio Marketplace for [Flutter](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter "Link to Flutter extension on Visual Studio Code Marketplace") and [Dart](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code "Link to Dart extension on Visual Studio Marketplace").

You might be familiar with installing extensions in VS Code. However, for newbies, I have explained it here. Click on the extension icons in the left side menu, type the desired extension name in the search box, select the required extension, and then click Install. Ta-da! You’re done.

![Installing Flutter Extension in Visual Studio Code](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Installing-Flutter-Extension-in-VS-Code-1.png)<figcaption>Installing Flutter Extension in Visual Studio Code</figcaption>

Now let’s dive into the list of extensions.

## #1 Pubspec Assist

Do you get bored searching for required Flutter and Dart packages in [pub.dev](http://pub.dev/ "Link to pub.dev page")? Then, you should try this [Pubspec Assist extension](https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist "Link to Pubspec Assist extension on Visual Studio Marketplace"). This extension allows you to search for packages without having to leave the editor and then adds them to the pubspec.yaml file. In addition, it allows you to search for multiple packages simultaneously by separating the names with commas.

![Searching for Packages within the Editor Using the Pubspec Assist Extension](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Searching-for-Packages-within-the-Editor-Using-the-Pubspec-Assist-Extension-1.gif)<figcaption>Searching for Packages within the Editor Using the Pubspec Assist Extension</figcaption>

## #2 Error Lens

Errors and warnings are normal during development, but the methods we use to handle them are unique. In the VS Code editor, the errors and warnings are usually shown at the bottom, and we must scroll through the list to see if there are additional problems.

The [Error Lens extension](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens "Link to Error Lens extension on Visaul Studio Marketplace") highlights the error lines in the code and appends the error details at the end of the line. Error icons are also displayed in the gutter.

Also, you can customize the color of the error highlight in the settings.json file. This will make your mistakes appear more enticing.

![Error Details Displayed Inline Using Error Lens Extension](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Error-Details-Displayed-Inline-Using-Error-Lens-Extension-1.png)<figcaption>Error Details Displayed Inline Using Error Lens Extension</figcaption>

## #3 Flutter Tree

It’s difficult to recognize widgets in a tree when you construct an application with a large number of widgets. The [Flutter Tree extension](https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree "Link to Flutter Tree extension on Visual Studio Marketplace") creates the desired widget tree with simplified syntax. This makes the creation of widget trees much easier, but you have to use its own syntax to do so, which is as follows.

**Syntax**

```dart
OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild]
```

**Code generated**

```dart
OneChild(
    child: MultipleChild(
        children: <Widget>[
            OneChild(),
            MultipleChild(
                children: <Widget>[
                    OneChild(),
                    OneChild(),
                ]
            ),
            OneChild(
                child: OneChild(),
            ),
        ]
    ),
)
```

![Generating a Widget Tree with Simplified Syntax Using Flutter Tree Extension](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Generating-a-Widget-Tree-with-Simplified-Syntax-Using-Flutter-Tree-Extension-1.gif)<figcaption>Generating a Widget Tree with Simplified Syntax Using Flutter Tree Extension</figcaption>

## #4 Bracket Pair Colorizer 2

We are frequently lost in the maze of nested classes and widgets, wasting a lot of time and effort attempting to find the correct bracket pair. [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2 "Link to Bracket Pair Colorizer 2 extension on Visual Studio Marketplace") is a lifesaver when it comes to locating misplaced brackets.

You can also customize the color of bracket pairs.

![Displaying Brackets in Different Colors Using Bracket Pair Colorizer 2](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Displaying-Brackets-in-Different-Colors-Using-Bracket-Pair-Colorizer-2.gif)<figcaption>Displaying Brackets in Different Colors Using Bracket Pair Colorizer 2</figcaption>

## #5 Dart Data Class Generator

Often, we overlook the creation of required methods in a class. VS Code has a feature that allows you to add missing methods, but you can only add one at a time. The [Dart Data Class Generator](https://marketplace.visualstudio.com/items?itemName=BendixMa.dart-data-class-generator "Link to Dart Data Class Generator extension on Visual Studio Marketplace") overcomes this by building Dart data classes with the constructor, copyWith, toMap, fromMap, toJson, fromJson, toString, operator ==, and hashCode methods based on class attributes or raw JSON, as the name implies.

This extension also sorts the **imports** alphabetically and converts them to a proper format.

![Generating Required Methods Using Dart Data Class Generator](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Generating-Required-Methods-Using-Dart-Data-Class-Generator.gif)<figcaption>Generating Required Methods Using Dart Data Class Generator</figcaption>

## #6 Flutter Stylizer

Dealing with a huge code base that is not organized properly decreases developer productivity. The [Flutter Stylizer](https://marketplace.visualstudio.com/items?itemName=gmlewis-vscode.flutter-stylizer "Link to Flutter Stylizer extension on Visual Studio Marketplace") extension erases this problem by organizing your methods in a consistent and opinionated way.

This tool organizes the classes within the file in the following manner:

Constructor – named constructor – public static variables – public instance variables – public override variables – private static variables – private instance variables – public override methods – other public methods – build method.

Flutter itself provides formatting choices, however, it only formats Dart files and it doesn’t re-order the code. Flutter formats the code based on these [formatting rules](https://github.com/dart-lang/dart_style/wiki/Formatting-Rules "Link to Dart Formatting Rules demos on GitHub").

![Reordering the Code Using Flutter Stylizer](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Reordering-the-Code-Using-Flutter-Stylizer.gif)<figcaption>Reordering the Code Using Flutter Stylizer</figcaption>

## #7 Better Comments

If all comments are in the same format, we won’t be able to prioritize the job, and there’s a risk of ignoring important tasks. The [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments "Link to Better Comments extension on Visual Studio Marketplace") extension aids in the creation of colorful comments, which makes them more readable. This makes it easier to keep track of the code comments.

All you have to do is start a comment with \*, !, ?, or TODO, and it will be colored in an assigned way. You can also create your own comment styles using the settings.json file.

![Styling Comments Using Better Comments](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Styling-Comments-Using-Better-Comments.png)<figcaption>Styling Comments Using Better Comments</figcaption>

## #8 Color Highlight

We deal with a wide range of colors when designing an application, but what if the colors we’re coding were visible in the code editor? This would be very productive by showing us the application colors without having to run the application. The [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight "Link to Color Highlight extension on Visual Studio Marketplace") add-on makes it possible to view the colors that are specified by styling the color in our code.

![Displaying Color Previews in Editor Using Color Highlight](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Displaying-Color-Previews-in-Editor-Using-Color-Highlight.png)<figcaption>Displaying Color Previews in Editor Using Color Highlight</figcaption>

## #9 Markdownlint

There are no compilers in the Flutter project that guarantee to find issues in README.md or CHANGELOG.md files. To remedy this, the [Markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint "Link to Markdownlint extension on Visual Studio Marketplace") plugin provides a set of guidelines to encourage Markdown file standards and uniformity. You can use this extension to check for problems locally and verify the content before publishing it live. Browse the [user manual](https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md "Link to Markdownlint Rules demos on GitHub") to learn more about rules.

In the following image, you can see errors like multiple consecutive blank lines, heading levels should increment by one, and the list should be surrounded by blank lines. On a related note, I would like to remind you that you can preview Markdown files in VS Code by using the Preview button.

![Displaying Errors in Markdown Files Using Markdownlint Extension](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Displaying-Errors-in-Markdown-Files-Using-Markdownlint-Extension.png)<figcaption>Displaying Errors in Markdown Files Using Markdownlint Extension</figcaption>

## #10 JSON to Dart Model

When working with _n_ number of JSON files, creating Dart models for all of them is time-consuming. [JSON to Dart Model](https://marketplace.visualstudio.com/items?itemName=hirantha.json-to-dart&ssr=false#overview "Link to JSON to Dart Model extension on Visual Studio Marketplace") creates a Dart class for the given JSON string. It’s possible to make JSON values required or default by adding r@ or d@ to your JSON key, and JSON to Dart Model will produce Dart models for you.

In the following figure, the JSON file is shown on the left, and the required classes and properties are shown on the right, which are produced from the JSON file using the JSON to Dart Model extension.

![Generating Required Classes and Properties from JSON File Using JSON to Dart Model](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Generating-Required-Classes-and-Properties-from-JSON-File-Using-JSON-to-Dart-Model.png)<figcaption>Generating Required Classes and Properties from JSON File Using JSON to Dart Model</figcaption>

## Conclusion

Thanks for reading! I hope you will be keen to use these Visual Studio Code extensions for Flutter. If you are using any other extensions in your day-to-day Flutter development and find them to be useful, please share them with us in the comments section below.

Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview "Link to Introduction to Syncfusion Flutter Widgets Documentation") to learn more about Syncfusion [Flutter widgets](https://www.syncfusion.com/flutter-widgets "Link to Flutter UI widgets"). You can also see our Syncfusion Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples "Link to the Syncfusion Flutter examples on GitHub"). Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en "Link to Flutter demos on Google Play Store"), [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341 "Link to Flutter demos on App Store"), the [web](https://flutter.syncfusion.com/ "Link to Flutter web demos"), [Windows Store](https://www.microsoft.com/en-us/p/syncfusion-flutter-gallery/9nhnbwcsf85d?activetab=pivot:overviewtab "Link to Flutter demos on Microsoft Store"), [macOS](https://install.appcenter.ms/orgs/syncfusion-demos/apps/syncfusion-flutter-gallery/distribution_groups/release "Link to Flutter demos on App Center"), and [Snapcraft (Linux)](https://snapcraft.io/syncfusion-flutter-gallery "Link to Flutter demos on Snapcraft").

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our Flutter features.

Finally, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you! ** **

## Related blogs

- [How to Create a Balance Sheet Using Flutter Excel Library](https://dev.to/syncfusion/how-to-create-a-balance-sheet-using-flutter-excel-library-4g7o "Link to How to Create a Balance Sheet Using Flutter Excel Library blog")
- [15 Best Visual Studio Code Extensions for Web Developers in 2021](https://www.syncfusion.com/blogs/post/15-best-visual-studio-code-extensions-for-web-developers-in-2021.aspx "Link to 15 Best Visual Studio Code Extensions for Web Developers in 2021 blog")
- [Creating Extensions for Visual Studio Code: A Complete Guide](https://dev.to/syncfusion/creating-extensions-for-visual-studio-code-a-complete-guide-3588 "Link to Creating Extensions for Visual Studio Code: A Complete Guide blog")
- [Introducing the Syncfusion Web Projects Template for Visual Studio Code](https://dev.to/sureshmohan/introducing-the-syncfusion-web-projects-template-for-visual-studio-code-31hi-temp-slug-990551 "Link to Introducing the Syncfusion Web Projects Template for Visual Studio Code blog")