nav font loadernav font loader
We are at Flutter Forward in Nairobi, Kenya! 25 - 29 January
We are at Flutter Forward in Nairobi, Kenya! 25 - 29 January
Go BackGo Back
Flutter

Top Visual Studio Code Extensions to improve your Flutter app development

Looking to boost the productivity and streamline the workflow of your Flutter project? Here's a blog post you won't want to miss!

We share our knowledge and experience in our blog | Somnio Software

by Abhishek Doshi

5 min read · Jan 20, 2023

In order to improve software development efficiency, one must know very clearly which are the best tools to use. In this blog post, we’ll explore the top Visual Studio Code extensions to improve your Flutter app development.

Visual Studio Code (VS Code) is a popular code editor developed by Microsoft that is widely used by Flutter developers. One reason for its popularity is that it has a huge repository of extensions that can be used to enhance its functionality. This allows developers to maximize efficiency, improve development processes, and achieve better results. This, combined with the fast Flutter development and time-to-market, allows applications to be released into production faster and better.

Awesome Flutter Snippets

Awesome Flutter Snippets is a collection of commonly used Flutter classes and methods. It increases the development speed by eliminating most of the boilerplate code associated with creating a widget. Widgets such as StreamBuilder and SingleChildScrollView can be created by typing the shortcut streamBldr and singleChildSV respectively.

Features:

  • Speeds up development.
  • Eliminates boilerplate.
  • Supports complex widgets (Eg: Custom Clipper and Custom Paint).

Feel free to get the extension from the marketplace or search in the extensions area of VS Code!

Bloc

If you are using BLoC as a Flutter state management solution, this extension will be of great use to you. It will help create all required files, such as event, state, and bloc!

VSCode supports the Bloc Library and provides tools for effectively creating Blocs and Cubits for both Flutter and AngularDart apps.

You can get the extension on the marketplace or search it on VS Code.

Error Lens

ErrorLens turbocharges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language, and also printing the message inline.

Features:

  • Highlight lines containing diagnostics.
  • Append diagnostic as text to the end of the line.
  • Show icons in gutter.
  • Show message in status bar.

Get the extension on the marketplace or search for it on VS Code.

Flutter Intl

It is a VS Code extension to create a binding between your translations from .arb files and your Flutter app. It generates boilerplate code for official Dart Intl library and adds auto-complete for keys in Dart code.

Get the extension from the marketplace or search in the extensions part of VS Code!

Flutter Intl

Git History

This extension is really helpful when you are using git for version control. It provides you with git log, file history, commit logs, and many more.

Feel free to get the extension from the marketplace or search in the extensions part of VS Code!

GitHub Copilot

GitHub Copilot uses OpenAI Codex to suggest code and entire functions in real-time right from your editor. Trained on billions of lines of public code, GitHub Copilot turns natural language prompts including comments and method names into coding suggestions across dozens of languages.

Feel free to get the extension from the marketplace or search in the extensions part of VS Code!

GitLens — Git supercharged

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

Feel free to get the extension from the marketplace or search in the extensions part of VS Code!

GitLens — Git supercharged

Jira and Bitbucket (Atlassian Labs)

Atlassian for VS Code brings the functionality of Atlassian products to your favorite IDE! This extension combines the power of Jira and Bitbucket to streamline the developer workflow within VS Code.

With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more!

Feel free to get the extension from the marketplace or search in the extensions part of VS Code!

Jira and Bitbucket (Atlassian Labs)

Material Icon Theme

This extension will be mainly helpful for changing the default boring folder and file icons for your Flutter Project!

Feel free to get the extension from the marketplace or search in the extensions part of VS Code!

Material Icon Theme

Pubspec Assist

Pubspec Assist is a Visual Studio Code extension that allows you to easily add dependencies and dev dependencies to your Dart and Flutter project’s pubspec.yaml, all without leaving your editor.

Note: In Dart version >2.5, this feature is by default available!

Feel free to get the extension from the marketplace or search in the extensions part of VS Code!

Pubspec Assist

YAML

This extension provides comprehensive YAML Language support to Visual Studio Code, via the yaml-language-server, with built-in Kubernetes syntax support. Using this extension, it will be very easy to detect any errors present in pubspec.yaml file!

You can get the extension from the marketplace or search in the extensions part of VS Code!

YAML

All in all

In conclusion, these are some Top Visual Studio Code Extensions to improve your Flutter app development that can help developers be more productive and efficient when working on Flutter projects.

Whether your project is big or small, these extensions can help you get the most out of VS Code and make Flutter development a smoother and more enjoyable experience.

This article is purely just suggestions of extensions that can help speed up a project. There are many other extensions that will help boost performance! I hope that you learned something new from this article, and stay tuned for upcoming blog posts.


by Abhishek Doshi

5 min read · Jan 20, 2023

Abhishek Doshi is Google Developer Expert and is a Flutter Developer at Somnio Software. Abhi is an International Tech Speaker and Writer for Flutter and Firebase and enjoys helping grow this tech.

Dart
Mobile app development
Software development
Webdevelopement

Let’s create successful apps together!

ˑ
Select...