Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

Time:2020-3-2

This article starts with WeChat official account.What happened to flutterWithout authorization, reprint is strictly prohibited. Thank You for Your Cooperation.


Today is the annual Mid Autumn Festival. First of all, I wish you all a happy mid autumn festival. I hope everyone has a good time. Thank you for your long time support for this official account. At the same time, thank you very much for your valuable comments. It’s really a pleasure to meet so many lovely friends. In addition to good food and drink, don’t forget to stop learning. Here are the latest dry goods waiting for you.

On the morning of September 10, 2019 Beijing time, Google officially announcedFlutter version 1.9, and then I experienced the latest content of flutter at the first time, which also encountered many holes. Here I wrote a blog to share with you, hoping that you can avoid detours. If you like, just pay attention to my blog.


First of all, I drew a flow chart here. Let’s take a look at it first, get familiar with it, and help you master the whole process faster.

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)


1、 Switch branches and upgrade to the latest version

The master branch is recommended. Useflutter upgradeCommand to the latest version.

2、 Using commandsflutter run -d chromeThe first experience was wrong.

I created a new projectflutter_demo, and then I runflutter run -d chrome, but no response.

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

What’s the problem? I opened Google browser without any reaction.

3、 Solutions

Step 1. Operationflutter config --enable-webCommand, start the default command to implement the flutter web support.

If it is windows, the command is as follows:

And then it’s on the computerC:\Users\Administrator\AppData\RoamingPath generationflutter_settingsFile (administrator is the name of your computer). You can open it with a text editor. The content is as follows:

{
  "enable-web": true
}

A screenshot of the path is shown below:

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

If it’s a Mac, you only need to run it once~/.flutter_settingsThis command will automatically create this file without it, and then copy the following configuration toflutter_settingsDocuments can:

{
  "enable-web": true
}

Step 2. Operationflutter run -d chromeCommand, the required web SDK will be downloaded automatically

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

Step 3. Execute the commandflutter create .Note: don’t forget the point at the back. It’s a big hole. )

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

Step 4. Run again at this timeflutter run -d chromeYou can automatically run the fluent code on the browser.

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

Here is a screenshot of the browser:

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

summary

1. operationflutter config --enable-webcommand
2. Execution of ordersflutter create .Don’t forget the point at the back. It’s a big hole
3. In the future, you only need to execute any flutter projectflutter run -d chromeThe command runs in the browser.

4、 Generate a release version of the web file

implementflutter build webCommand to compile dart files into HTML, JS, CSS files, and then deploy to the website.

The command line uses the following:

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

Compile the generated web file in the root path of the projectbuild/webInside, as shown in the red frame below:

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

5、 Deploy to web site

(1) Pits and solutions encountered during deployment

Question 1: deployment to the web page can’t open the page. It’s always blank. It can only be run when debugging locally.

I found that when I deployed it to GitHub or an external website, I couldn’t open a web page. Later, I saw that in the root path of the projectbuild/webInside, there’s amain.dart.js.mapDocuments. It introduces localflutter_web_sdkDirectory. Then I will find the path of the corresponding file.

◆ solution to problem 1:

Find the installation path of the fluent (for example, my isE:/develop/flutter), and open thebin/cache/flutter_web_sdk/flutter_web_sdk/, put the inner layerflutter_web_sdkCopy all contents of folder toProject root directory / build / WebInside, and rerunflutter build webYes. PS: I don’t know why there are two folders with the same name? It’s a big hole

Please refer to the following figure for the specific directory to copy:

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

Question 2: filesystemexception: deletion failed, path = ‘. Dart_tool / build / shuttle_web’ (OS error: directory is not empty, errno = 145)

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

◆ solution to problem 2:

Delete the.dart_toolsFile, and then execute the command againflutter build webYes.

(3) Question 3: fluent web does not support components to jump directly to external web pages

Button in flutter wants to jump to the web page. I useurl_launcherJump to an external web page if you useflutter build webThe compiled page has no effect in the browser.

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)

I already mentioned it to the authoritiesissuesThe official staff said that they would support and improve the function as soon as possible, and also thanked me for my feedback.

(2) Website page

Here we just demonstrate the small functions of a calculator (the code comes from the official sample), and here we just convert the code of the calculator into a demonstration of the flutter web function.

Demo page: https://aweiloveandroid.githu

GitHub homepage: https://github.com/aweilovean

(3) Website page sample GIF graphic presentation

Summary of flutter1.9 upgrade experience (fill in the hole for everyone)


More exciting dry cargo, welcome to WeChat official account.What happened to flutter