Problems of different renderers running on the web with flutter2.0

Preface
Flutter2.0 Soon after it was released , Yes web Support for has just entered stable Stage .

First few days , structure web There are some problems in application , For example, Chinese is displayed as garbled code , Then the image cross domain problem occurs when the image is loaded ：

Failed to load network image
...
Trying to load an image from another domain?

1. Turn on web End construction ： Use the following command to start Web End build support

flutter config --enable-web

Prompt us ： Restart the editor , So they can read the new settings .

2. After the restart, we input again

flutter config

You can see ：

In this way, each new Flutter Project time , All support. web End built , There will be one more build configuration directory by default web( Before setting, only Android,iOS). Even if a project doesn't need support web There is no need to turn off this support for end-to-end construction , Do not use build web The order of .

3. The old project starts web Support ： In fact, it is to reconfigure the current project

flutter create .

Copy the above , Don't drop the following symbol .
perform ：

Then look at the project directory , except Android and iOS, You can see more web Catalogue ：

4. debugging web End
When no other end environment is available , Use the following command to compile directly web End and open chrome debug

flutter run

About the problem of cross domain access failure ：
Baidu for a while , The answer is ：Flutter Running and building Web Application time , You can choose between two different renderers . These two renderers are ：

1.HTML.CSS,Canvas Elements and SVG Elements .  The download size of the render is small .
2.Canvaskit. Use Skia Compiled into WebAssembly And use WebGL Rendering .  The render is similar to Flutter Mobile devices and desktops are exactly the same , Faster performance , And it's unlikely that there will be differences between browsers , But the download size has increased by about 2MB.

Flutter The default setting for this option in the official documentation is , When the application is running in a mobile browser , This option selects HTML Renderers ; When the application is running in a desktop browser , choice CanvasKit Renderers . So it seems that the system is set for us CanvasKit Renderers .

So they used orders ：

flutter run -d chrome --web-renderer html
 
flutter run -d chrome --web-renderer canvaskit

Use html The display shows the normal page , While using canvaskit And a blank page is displayed . So up to now , We can also basically locate , It should be downloaded from the browser CanvasKit Problems caused by mistakes . therefore , After a series of scientific Internet settings , Problem solving .

Enclosed flutter web Some common commands ：

flutter channel beta // Switch versions 
flutter upgrade // Check for upgrades 
flutter config --enable-web // add to web Support 
flutter devices // View connected devices , Will be displayed chrom browser , There is no suggestion to install one 
flutter create xxx // Create a new web project , The project name does not support hump writing 
cd xxx // Switch to directory 
flutter run -d chrome // Run to device 
flutter build web // pack web project 
flutter build apk//android  pack 
flutter build ios --release//ios  pack