DEV Community

Cover image for The ultimate collection of vscode extensions for flutter.
Yassine BENNKHAY
Yassine BENNKHAY

Posted on

The ultimate collection of vscode extensions for flutter.

Flutter has been gained big popularity in the last few years, and today I'm going to show you the must-have Vscode Extensions to work comfortably with it and to multiply your productivity, so without any further words let go into it!

1-Flutter :
This VS Code extension adds support for effectively editing, refactoring, running, and reloading Flutter mobile apps, as well as support for the Dart programming language.

2-Dart :
Dart Code extends VS Code with support for the Dart programming language and provides tools for effectively editing, refactoring, running, and reloading Flutter mobile apps, and AngularDart web apps.

3-Better Comments:
Better Comments
The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations into:

  • Alerts
  • Queries
  • TODOs
  • Highlights

Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings.

4-Bracket Pair Colorizer 2:
This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use

5-Dart Data Class Generator:
Create dart data classes easily, fast, and without writing boilerplate or running code generation.

6- Gradle Language Support:
An extension to provide Gradle language support for Visual Studio Code, including advanced functionalities like Syntax Highlighting, Keyword Auto-completion Proposals, and Duplication Validation.

7-Material Icon Theme: an extension to get the Material Design icons into your VS Code.

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

9-Awesome Flutter Snippets:
Awesome Flutter Snippets is a collection of commonly used Flutter classes and methods. It increases your speed of development by eliminating most of the boilerplate code associated with creating a widget

10- Error Lens:
ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Did I miss any extensions? Let me know in the comments.
If you find this useful give it a like and don't forget to follow me on Instagram and on my Blog for more useful stuff about flutter.

Top comments (10)

Collapse
 
yatki profile image
Mehmet Yatkı • Edited

Thanks for the list :) Since Bracket Pair Colorizer 2 is in the list I might share mine as well :P Since it makes coding any programming language easier :D So here it is :) I've just released a new version.

GitHub logo yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


A simple yet powerful extension to add wrapper snippets around your code blocks

Features

  • Now works on VSCode for Web 🚀New!
  • Supports language identifiers
  • Supports multi selections
  • Fully customizable
  • Custom wrapper snippets
  • You can assign shortcuts for each wrapper snippets separately
  • Nicely formatted (Preserves indentations)
  • Sorts recently used snippets on top

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 1

Demo 2: Wrapping multi selections

Demo 2

How To Use

After selecting the code block, you can

  • right click on selected code
  • OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands






















Command Snippet

surround.with (ctrl+shift+T)
List of all the enabled commands below
surround.with.if if ($condition) { ... }
surround.with.ifElse if ($condition) { ... } else {




Cheers, 🚀🖖

Collapse
 
yassine_dev profile image
Yassine BENNKHAY

A star on Github added!

Collapse
 
yatki profile image
Mehmet Yatkı

Thank you very much :)) Cheers,

Collapse
 
yassine_dev profile image
Yassine BENNKHAY

Thanks for Sharing! I would be glad to use it for sure.

Collapse
 
c4s4r profile image
Maik

Many of the classic ones I already know, but a nice and compact overview for Flutter beginners! 👍
But even I have found a new gem, Error Lens, which I hadn't heard of before and will enhance my workflow from now on. Thanks! 😊

Collapse
 
yassine_dev profile image
Yassine BENNKHAY

you're welcome!

Collapse
 
pablonax profile image
Pablo Discobar

wow, that's awesome! I really like it! if you are interested in this topic, then check this article - dev.to/pablonax/free-flutter-templ...

Collapse
 
langley profile image
John Langley

Anyone know if you can create a vscode extension in Dart / with Flutter?

Collapse
 
nileshchavan67 profile image
nilesh chavan

Kindly check the below extenstion,

marketplace.visualstudio.com/items...