[Flutter] VSCode configuration

2022-10-18 hit count image

Let's see some helpful configurations of VSCode when developing the app by Flutter.

Outline

Many developers use VSCode to develop the app by Flutter.

In this blog post, I will introduce some helpful configurations of VSCode when you develop wit Flutter.

Flutter UI Guides

When you develop the app by Flutter, you will use various widgets. However, when many widgets are used, it’s difficult to distinguish the widget’s start and end.

In VSCode, when you use Flutter to develop the app, the comments are automatically added to the end of widgets like the following. We can normally distinguish the widget’s start and end with this feature.

Flutter vscode settings - end of widgets

This feature is helpful to develop with Flutter. But, you can activate the Flutter UI Guides option to make it more helpful.

Open the VSCode settings and search Flutter UI Guides. And then, activate the two options like the following.

Flutter vscode settings - Flutter UI Guides

  • Dart: Preview Flutter UI Guides
  • Dart: Preview Flutter UI Guides Custom Tracking

After setting the options and restarting VSCode, you can see the guidelines, that make you distinguish easier, like the following

Flutter vscode settings - Flutter UI Guides activate

Hot Reload

When you use Flutter to develop the app in VSCode, the Hot Reload is basically worked. At this time, the Hot Reload is executed when the onDidSave event of VSCode occurs. In other words, when you modify files in VSCode, the Hot Reload is executed.

To make the Hot Reload executed when the Dart file is modified by other tools instead of VSCode, you need to activate the Preview Hot Reload On Save Watcher option.

Open the VSCode settings and search Preview Hot Reload On Save Watcher. And then, activate it like the following.

Flutter vscode settings - Hot Reload On Save Watcher

  • Dart: Preview Hot Reload On Save Watcher

When you activate this option and modify(generate) the code by executing commands(modifying with other tools), the Hot Reload will work.

Completed

Done! we’ve seen how to configure the VSCode settings to make it more helpful when you develop with Flutter. If you use Flutter with VSCode, try to configure these options to make it more helpful for developing with Flutter.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts