preface

I have not been in touch with Flutter development for a long time. I first paid attention to Flutter when I heard that it can be developed across iOS, Android and Web terminals. Until the release of Flutter2.0 last week, I realized that cross-web was just stable…

Let’s get a real taste of Flutter’s ability to launch web applications.

Enable the Web building function

Use the following command to turn on support for Web builds

flutter config --enable-web
Copy the code

After enabling flutter config we can see it by entering flutter config again

Creating a new project

This way, every time a New Flutter project is created, the build configuration directory Web will be created by default.

Even if a project doesn’t need to support web builds, it doesn’t have to be turned off. Just don’t use the build Web command

Enable Web support for old projects

It’s a reconfiguration of the current project

flutter create .
Copy the code

Debug web side

When no other side environment is available, using the following command will directly compile the Web side and open Chrome for debugging

flutter run
Copy the code

Compile and publish the Web side

Flutter can choose from two rendering modes when building a Web application. I’m going to give you a demonstration, and you should pay attention to the part of the screenshot that I’ve marked in red.

HTML rendering mode

flutter build web --web-renderer html
Copy the code

When we use HTML rendering mode, Flutter uses HTML custom Elements, CSS, Canvas and SVG to render UI elements

Advantages:

  • Application volume is smaller

Disadvantages:

  • Poor rendering performance
  • Cross-end consistency may be affected

CanvasKit rendering mode

flutter build web --web-renderer canvaskit
Copy the code

When we use Canvaskit rendering mode, Flutter compiles Skia to WebAssembly format and renders using WebGL. Application consistency on mobile and desktop provides better performance and reduces the risk of inconsistent rendering across browsers. But the size of the application will increase by about 2MB.

Advantages:

  • Pixel – level cross-end consistency
  • Better rendering performance

Disadvantages:

  • The size of the application becomes larger and a 2.5MB version needs to be loadedwebaseemblyFormat code

There is also an Auto render mode (the default), which is automatically selected based on whether it is running in a mobile browser or a desktop browser

conclusion

With the release of Flutter2.0, more attention will be paid to this framework with “platform-wide pixel-level cross-end consistency”. Although the compilation results of the Web side are not interesting by the standards of the domestic Web experience, it is really worth looking forward to.

Pay attention to my

An old programmer who was a designer but loves programming

Recent articles (thanks for your encouragement and support 🌹🌹🌹)

  • 🔥 made a night of animation, just to give you a better understanding of Vue3 Composition Api 940 likes
  • 🔥 update 2020, Vue simulates the effects of dragging cards for 1,112 likes
  • The use of 🔥 Webview | VSCode plug-in development tutorial 19 praise
  • 🔥 launched nuggets statistics dashboard function [I love Nuggets] 0.0.15 | bold New Year essay 7 likes
  • 🔥 please accept this source code, with Vue development of an “ant forest water stolen vegetables” game 66 praise

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign