This article was first published on the wechat public account Flutter. It is strictly prohibited to republish without authorization. Thank you for your cooperation.

Today is the annual Mid-Autumn Festival. First of all, I wish you a happy Mid-Autumn Festival and a happy family. I hope you all have fun and eat well. Thank you for your long time to support our official account. At the same time, thank you very much for your valuable suggestions. It’s really my pleasure to know so many lovely little friends. During the holidays, in addition to eating and drinking, don’t forget to stop studying, come here to the latest dry goods waiting for you.


On the morning of September 10, 2019 (Beijing time), Google officially released Flutter1.9. Then I experienced the latest content of Flutter at the first time, which also encountered many problems. Here I wrote a blog to share with you, hoping that you can avoid missteps. If you like, follow my blog.

First of all, I draw a flow chart here, put it up for you to have a look, familiar with it, to help you master the whole process faster.

Switch branches and upgrade to the latest version

The master branch is recommended. Upgrade to the latest version using the flutter upgrade command.

2. Use commandsflutter run -d chromeThe first experience was wrong.

I created a new project flutter_demo and then I ran flutter Run -d Chrome but nothing happened.

What ‘s the problem? I opened Chrome and nothing happened.

Iii. Solutions

Step 1 Runflutter config --enable-webCommand to enable the Flutter Web support by default.

For Windows, the command is as follows:

The flutter_settings file will be generated in the C: Users\Administrator\AppData\Roaming path of your computer. You can open it in a text editor, and it will look like this:

{
  "enable-web": true
}
Copy the code

Path screenshot, as shown below:

For macs, you only need to run the ~/. Flutter_settings command once, which will automatically create the file if it doesn’t exist, and then copy the following configuration to the flutter_settings file:

{
  "enable-web": true
}
Copy the code

Step 2 Runflutter run -d chromeCommand will automatically download the required Web SDK

Step 3 Run commandsflutter create . （Note: Don’t forget the back dot, it’s a big pothole.

Step 4. Run the command againflutter run -d chromeThe Flutter code will now automatically run on the browser.

Here is a screenshot of the browser:

conclusion

1. Runflutter config --enable-webThe command
2. Run commandsflutter create .(Don’t forget the point in the back, it’s a big pothole.)
3. After creating any Flutter project, just execute itflutter run -d chromeThe command then runs in the browser.

4. Generate the Web file of release version

performflutter build webCommand to compile the DART file into HTML, JS, and CSS files that can then be deployed to your website.

The command is executed as follows:

The files required for compiling the web are in build/ Web, the root path of the project, as shown in the red box below:

Deploy to the website

(1) Potholes and solutions encountered during deployment

Problem 1: Deployment to the web page does not open the page, it is always blank, only local debugging can be run.

I found that when I deployed to GitHub or an external website, I couldn’t open the website. Then I saw that there was a file in the build/ Web of the project root path, main.dart.js.map. The native flutter_web_SDK directory has been imported. Then I go to find the corresponding file path.

◆ Solution to problem 1:

Find the Flutter installation path (e.g. My flutter is E:/develop/flutter) and open up bin/cache/flutter_web_sdk/flutter_web_sdk/, Copy the contents of the flutter_web_SDK folder into the project root directory /build/web and run flutter Build Web again. PS: Wonder why there are two folders with the same name? It’s a big hole.

For details about which directory to copy, see the following figure:

FileSystemException: Deletion failed, path = ‘.dart_tool/build/flutter_web’ (OS Error: directory is not empty, errno = 145)

◆ Solution to problem 2:

Delete the. Dart_tools file in the root directory of the project and re-execute the flutter build web command.

Problem 3: The Flutter Web does not allow components to jump directly to external Web pages

The Button inside the Flutter wants to jump to a web page. I use url_launcher to jump to an external web page. If I use the Flutter build web compiled page, it will have no effect on the browser.

I have submitted issues to the official, and the official staff said that they would support and improve the function as soon as possible, and also expressed their thanks for my feedback.

(2) Website page

Here we are just demonstrating a small function of a calculator (the code comes from the official sample). Here we are just converting the calculator code into a Flutter Web function demonstration.

Demo page:Aweiloveandroid. Making. IO/flutter_dem…

Making the home page:Github.com/AweiLoveAnd…

(3) Site page example GIF graphics demonstration

More wonderful dry goods, welcome to pay attention to the wechat public numberBecause those things.