Flutter2 formal version

Flutter2 is released on March 5, 2021

With Flutter 2, you can use the same code base to build native applications for five operating systems: iOS, Android, Windows, macOS and Linux; And building web experiences for browsers like Chrome, Firefox, Safari and Edge. Flutter can even be embedded into cars, TVS and smart home appliances, providing the most pervasive and portable experience for environmental computing.

The most significant development that Flutter2 has brought about is the stable version of Flutter on the Web platform.

Flutter Web can run in a browser and theoretically on any device/system

Flutter’s Web support is based on hardwired 2D and 3D graphics and flexible layout and painting apis, providing an application-centric framework that takes advantage of all the advantages that the modern Web has to offer.

  • Progressive Web Applications (PWA) : Combine the reach of the Web with the capabilities of desktop applications.
  • A single page application (SPA) that loads once and transfers data to and from the network.
  • Bring the existing Flutter mobile application to the Web to enable shared code for both experiences

To sum up:

Flutter can develop interactive Web pages instead of just static ones

From Mobile apps to Web apps

How do I have a Flutter Web application?
  1. Switch the Flutter SDK to master Channel (if the Flutter does not move, go over the wall or switch to domestic mirror)
flutter channel master
flutter upgrade
Copy the code
  1. Create a Web directory in the original Flutter project. Open the terminal and run the following command
flutter create .
Copy the code

After successful execution we can see the Web directory under the current project

And then in the running device list select Chrome (Web)Click Run to run our project in the browser, which takes a little longer the first time we compile because we need to compile the entire project.

Web applications still support hot reloading

Web applications have two rendering modes

How do we choose which rendering mode to use?

By default, rendering mode is set to automatic and optimized for each platform. Please read the official documentation for specific optimization points

  • Applications running in mobile browsers are rendered in HTML
  • Applications running in desktop browsers are rendered using CanvasKit

How to debug? Can I set breakpoints?

The Flutter Web App connects to Chrome’s JS debugger, which can be used to set breakpoints, as well as Chrome DevTools

How do you publish it?

Execute flutter build webCopy the code

Then we can access the hosting platform where we can upload the product

The Flutter Web compiler is different from mobile. Because Flutter uses the Dart language, the entire Flutter framework can be compiled into JavaScript

The only difference between mobile application and web application is the basic engine used. The mobile terminal uses C++ engine, while the web terminal uses Browser(C++,JS) engine. We don’t have to change any project code to have a Web application, because the FLUter framework API is exactly the same.

The following are the mobile and Web architectures

What should be noticed in Flutter Mobile app to Web?
  • Whether the library used supports the Web. Go to pub. Flutter – IO. Cn/to find the library to see if it supports web
  • Web applications run on a variety of devices and need to be adapted to devices with different screen sizes. Do multiple screen size layouts. For example, a list can display one line on a mobile device and multiple lines on a computer screen.
  • navigation
  • Add scrollbars, mouse and keyboard interaction for desktop/Web applications
  • Choose the right rendering mode for your Web application

References:

Flutter. Dev/web github.com/flutter/gal…