Table of Contents
Modify the configuration of VSCode
Home Development Tools VSCode How to configure VSCode to realize automatic response of Flutter and Hot Reload!

How to configure VSCode to realize automatic response of Flutter and Hot Reload!

Oct 25, 2021 am 11:13 AM
flutter vscode

VSCodeHow to write Flutter and Hot Reload automatically respond? The following article will introduce to you how to configure VSCode. I hope it will be helpful to you!

How to configure VSCode to realize automatic response of Flutter and Hot Reload!

I have been using VSCode to write Flutter.

I didn’t set up VSCode much before, but when I was writing Flutter, there was a function that I was very comfortable using, that is, Once I rewrote the code, VSCode would automatically Hot Reload is performed.

But after I upgraded VSCode, this function disappeared inexplicably. You must manually execute cmd s before executing Hot Reload. [Recommended study: "vscode tutorial"]

It was obviously automatic before, but now it is manual, but I am not used to it, so I decided to check how to change this configuration.

Modify the configuration of VSCode

After a fierce search on the Internet, I finally found the configuration method, and now I share it:

1. Open the VSCode settings:

How to configure VSCode to realize automatic response of Flutter and Hot Reload!

2. Search dart.flutterHotReloadOnSave in the input box. We can see the default configuration manual at this time, only reload for manual saves, If and only when saving manually, start reload

How to configure VSCode to realize automatic response of Flutter and Hot Reload!

##3. Replace

manual with always:

How to configure VSCode to realize automatic response of Flutter and Hot Reload!

Let’s take a gif to see the effect. I used the source code of Flukit. After modifying the title of the AppBar and undoing the modification,

it was completed without saving or other keyboard operations. Hot Reload function:

屏幕录制2021-10-21 10.31.28.2021-10-21 10_37_07.gif

At this point, the

Hot Reload automatic response function I am used to is back.

Reference Document

https://stackoverflow.com/questions/49210769/vscode-hot-reload-for-flutter

Summary

As the saying goes, "A is like honey, B is like arsenic".

I am used to this automatic response to Hot Reload, but some people are more accustomed to saving and then Hot Reloading, because it may just change the logic to trigger Hot Reloading, and not everyone likes it, and more or less Consume performance.

Although Android kids have suggested that I use Android Studio for Flutter development, I'm still not used to it. I prefer VSCode, which is powerful enough and light enough at the same time.

I have always been used to writing Flutter through VSCode, but I use Android Studio when building apk or converting JSON to Model.

See you next time.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to configure VSCode to realize automatic response of Flutter and Hot Reload!. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode May 09, 2024 am 09:37 AM

First, open the vscode software on the computer, click the [Extension] icon on the left, as shown in ① in the figure. Then, enter [officeviewer] in the search box of the extension interface, as shown in ② in the figure. Then, from the search Select [officeviewer] to install in the results, as shown in ③ in the figure. Finally, open the file, such as docx, pdf, etc., as shown below

How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code Apr 23, 2024 pm 02:13 PM

First, open visual studio code on the computer, click the four square buttons on the left, then enter draw.io in the search box to query the plug-in, click Install. After installation, create a new test.drawio file, then select the test.drawio file, enter the editing mode on the left There are various graphics on the side. You can draw the flow chart by selecting at will. After drawing, click File → Embed → svg and then select Embed. Copy the svg code. Paste the copied svg code into the html code. Open the html web page and you can see it. Click on the picture on the web page to jump to the flow chart. On this page, you can zoom in and out of the flow chart. Here, we choose to click on the pencil pattern in the lower right corner to jump to the web page.

PHP vs. Flutter: The best choice for mobile development PHP vs. Flutter: The best choice for mobile development May 06, 2024 pm 10:45 PM

PHP and Flutter are popular technologies for mobile development. Flutter excels in cross-platform capabilities, performance and user interface, and is suitable for applications that require high performance, cross-platform and customized UI. PHP is suitable for server-side applications with lower performance and not cross-platform.

Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Apr 23, 2024 pm 03:01 PM

LeanCopilot, this formal mathematics tool that has been praised by many mathematicians such as Terence Tao, has evolved again? Just now, Caltech professor Anima Anandkumar announced that the team released an expanded version of the LeanCopilot paper and updated the code base. Image paper address: https://arxiv.org/pdf/2404.12534.pdf The latest experiments show that this Copilot tool can automate more than 80% of the mathematical proof steps! This record is 2.3 times better than the previous baseline aesop. And, as before, it's open source under the MIT license. In the picture, he is Song Peiyang, a Chinese boy. He is

How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode May 09, 2024 am 09:52 AM

1. First, after opening the interface, click the file menu in the upper left corner. 2. Then, click the settings button in the preferences column. 3. Then, in the settings page that jumps, find the update section. 4. Finally, click the mouse to check and enable it. Download and install the new VSCode version button in the background on Windows and restart the program.

How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace May 09, 2024 am 09:43 AM

1. First, open the vscode software, click the explorer icon, and find the workspace window 2. Then, click the file menu in the upper left corner and find the add folder to workspace option 3. Finally, find the folder location in the local disk , click the add button

How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode May 09, 2024 am 10:30 AM

1. First, open the settings option in the settings menu. 2. Then, find the terminal column in the commonly used page. 3. Finally, uncheck the usewslprofiles button on the right side of the column.

How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion May 09, 2024 am 09:49 AM

1. First, after opening the interface, click the workspace interface 2. Then, in the open editing panel, click the File menu 3. Then, click the Settings button under the Preferences column 4. Finally, click the mouse to check the CursorSmoothCaretAnimation button and save Just set it

See all articles