Flutter support for Web development was announced at Google I/O. Flutter is designed to build highly interactive, graphically rich web pages.

Flutter is currently designed for all-platform development. It is currently supported on Android, iOS, Windows, macOS, Linux and the Web.

Install the Webdev tool

We need the official Webdev tool to compile for us. Open Flutter_Web Find Install the Flutter_Web build tools in Getting Started, which details how to Install the Webdev tool.

Configuration webdev

flutter packages pub global activate webdev
Copy the code

Suggestion: Configure dart, pub, ~/. Pub -cache/bin to the environment variable

VSCode creates a Flutter Web project

Dart Official Documentation & Flutter Web Project Creation Tutorial

Open the command panel in VSCode and type the following command:

>Flutter:New Web Project
Copy the code

Then wait a moment to see the following interface:

After you enter the project name, VSCode opens a window that lets you choose which directory to save the project in. After selecting the directory, VSCode will create a new window to run your project.

Then run VSCode directly, just press the F5 shortcut key.

Dart & Flutter

Finally, the default browser will pop up a new window to run the project.

  • libThe main project code we will write is basically the same as the original Flutter
  • webContains an HTML file and a main.dart
  • .dart_toolIs the file generated by the project package run compilation

Index.html refers to the js file generated by the web/main.dart compilation

<head>
  <meta charset="UTF-8">
  <title>hello flutter</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
Copy the code

Dart calls lib/main.dart and basically changes the code in the lib directory.

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}
Copy the code

Add images

Different from the Flutter project, the added images can only be placed in Web /assets/.

. ├ ─ ─ pubspec. Lock ├ ─ ─ pubspec. Yaml └ ─ ─ web ├ ─ ─ assets │ ├ ─ ─ FontManifest. Json │ └ ─ ─ images │ └ ─ ─ swift_logo. PNG ├ ─ ─ Index.html └ ─ ─ the main dartCopy the code

Put swift_logo.png in the images directory.

Code used:

Image.assets('images/swift_logo.png')
Copy the code

More complete project related to Flutter Web

  • Flutter /flutter_web, which contains 5 demos.
  • Samples /gallery Displays of some components on the Web
  • Flutter for Web samples, here is a list of Flutter projects
  • Kalismeras61 / Flutter_web_dashboard, bootstrap-style background UI

Solutions to related problems

  • Image.assets(‘images/xxx.png’) can be displayed in a local environment, but cannot be loaded after being deployed on the server.

    There are two solutions

    • Plan a

      Dart:

      /// ....
import 'package:flutter_web_ui/src/engine.dart' as engine;

main() async {
  await ui.webOnlyInitializePlatform(
      assetManager: engine.AssetManager(assetsDir: "assets"));
  app.main();
}
Copy the code

    • Scheme 2:

      Add assetmanifest.json to web/assets/

      {
    "assets": [
        "images/swift_logo.png"]}Copy the code

  • ICONS cannot be displayed

    Add fontmanifest.json to web/assets/

    [{
    "family": "MaterialIcons"."fonts": [{
      "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"}}]]Copy the code

Some limitations of Flutter_web now

  • Due to performance and portability, Flutter Web applications do not currently support direct USE of CSS. That is, just like native Flutter, all the styles are implemented using component code.
  • Not all Flutter apis are implemented on Flutter for Web;
  • Currently, the debugging page is only supported in Chrome. Debugging in other browsers may have problems.
  • Dart: HTML, DART: JS, DART: SVG, AND DART: Indexed_DB. You can use them to access most browser apis.
  • Flutter_web compilation is still slow, and the compiled package is relatively large;
  • Running on the desktop browser, there are some shortcomings, most of which are based on the operation characteristics of mobile applications, and there is no special optimization for the operation habits of the desktop system.

Preview of existing achievements

Swiftclub Code: SwiftClub /site

For more details, please follow SwiftOldBird’s official wechat official account:

The original link: swiftoldbird. Loveli. Site / 2019/08/17 /…