At Google Developer Conference 2019, it was announced that The Flutter Web has been incorporated into the Flutter SDK, which means that the same set of code has been officially developed across platforms.

Main commands:

 flutter channel master
 flutter upgrade
 flutter config --enable-web
 cd <into project directory>
 flutter create .
 flutter run -d chrome
Copy the code

1. First make sure that the Flutter version is Flutter 1.9 or above

This can be viewed by Flutter –version

2. Use master Channel for Web development

Switch to the master channel by default by using the flutter channel master command.

3. Enable Web support

Enable Web support with flutter config –enable-web.

Once Web support is enabled, run Flutter Devices to see chrome device information.

Initialize a Futter Web project

Initialize a FLUTTER Web project with the flutter create. Command.

5. Web project operation

Flutte Run -d Chrome to run the project. After running, chrome will automatically open to view the effect.

When you open the project with Android Studio, you’ll see that Chrome is already available.

6. Generate a release

The Release build uses Dart2JS (not DartDevc) to generate a separate JavaScript file. This can be done by running the flutter command with the release flag or by building the Flutter Web. The output files are in the build/ Web directory, including the assets files to be provided together. Because debug builds can contain thousands of small files, debug builds are not supported here.

7, note

  • Although Web support has been added to the main repository, some features are missing and there are known performance issues. Therefore, it is not recommended to deploy Web applications in a production environment.
  • The Flutter Web application does not support thermal overloading.
  • The browser terminal refresh button does not refresh the app, but you can refresh the app by typing “R” in the console where flutter run -d Chrome is executed.
  • Web applications do not support file system access, so dart: IO is not available.
  • Web applications support the back button, but the forward button is not currently supported.
  • HTTP requests work on mobile devices, but not on networks. Web applications have special security limitations. If you encounter problems, check that the Web server you are accessing has the CORS header set to accept requests from the domain hosting the Flutter application.

Reference:

https://flutter.cn/docs/get-started/web
https://flutter.cn/docs/development/platform-integration/web
Copy the code

The last

Welcome to follow the “Flutter Programming and Development” wechat official account for more technology sharing.