This article briefly describes how to convert an existing Flutter project into a Flutter Web project.

Before we start, we should pour cold water on the idea that the ideal of a single set of code and multiple implementations will be destroyed, at least not with the current version of the Flutter Web SDK. But never mind, Google Dad has already lowered our expectations on the website:

  1. The project is currently only in thetechnical previewstate
  2. The project isFlutterThe main projectforkOut. Not yet ready to join the main project
  3. Not all of themFlutter APIThere are all corresponding onesFlutter Webimplementation
  4. At presentFlutter WebThe code is running very slow, and performance tuning has just begun

So The Flutter Web is only a work-in-progress at the moment, and we’re sure to stumble, but that doesn’t stop us from giving it a try. I happen to have a previously developed Flutter project in my hand. See what I need to do to convert to Flutter Web.

Assume that readers already have the Flutter development environment in place. If not, check out the Google documentation. On this basis we first build the environment of Flutter Web.

The Flutter Web requires that the build of the Flutter SDK be at least 1.5.4.

Then install the build tool webdev for Flutter Web:

flutter pub global activate webdev
Copy the code

Specific steps and questions can be referred to the official website, here is not to say more.

Then we started migrating the project.

Since Flutter Web and Flutter are currently two different SDKS, they can only be used in one of the two projects. Therefore, to support Flutter Web, the Flutter SDK cannot be used. Therefore, for the Flutter Web project, a new project can only be opened at present, and most of the original project will be moved there. VS Code also provides scaffolding for new projects:

Start by creating a new project with this method. Yaml no longer relies on flutter, but flutter_web:

name: hello_world_web
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5. 0 or Dart >=2.3. 0
  sdk: '> = 2.3.0 < 3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.5. 0
  build_web_compilers: ^2.1. 0
  pedantic: ^1.7. 0

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

Copy the code

Then move all the code from the lib folder in the old project. There’s going to be a bunch of compilation problems, and we’re going to deal with them one by one.

First we need to change the import mode completely, for example, the old flutter should be changed to flutter_web:

import 'package:flutter/material.dart'; /// no longer applicable
import 'package:flutter_web/material.dart'; /// now use this

import 'dart:ui'; /// no longer applicable
import 'package:flutter_web_ui/ui.dart'; /// now use this
Copy the code

In addition, since the project name is also changed, for example, hello_world is now hello_world_web, all relevant import should also be changed.

Once you’ve done this, if your project doesn’t have any third-party dependencies, the compile problem is pretty much solved. If there is a third party dependence, heh heh, this is more troublesome. Our project uses the following dependencies:

  percent_indicator: ^2.11.
  pull_to_refresh: ^1.51.
  fluttertoast: ^3.1. 0
  flutter_spinkit: "^ 3.1.0"
  modal_progress_hud: ^0.13.
  sticky_headers: "^ 0.1.8"
Copy the code

Adding these dependencies directly to a Flutter Web project causes an error:

Resolving dependencies... Because percent_indicator >=1.0.6 depends on flutter any from SDKwhichIs forbidden, percent_indicator >=1.0.6 is forbidden. So, because iwords_web depends on percent_indicator ^2.1.1, version solving failed.Copy the code

That is, these libraries are developed based on Flutter and cannot be used in the Flutter Web project… So I went to pub.dev to see if there is a corresponding Web version dependency, and found none…

In order to finally see the results of running, no matter how disgusting things have to do. Therefore, I decided to introduce the source code of all the libraries into the project, and then change the libraries one by one to support the version of Flutter Web. This is a manual job, omitted 1000 words here…

With that done, compilation problems should be gone. The next step is to deal with resources.

The previous method was to specify assets path in pubspec.yaml, but now the same method does not work. Then, the official website of Flutter Web did not say how to specify the resource. Finally, the solution was found in the official Sample code of Flutter Web:

Then I moved the assets folder from the original project to the web folder of the new project, and adjusted the path of reference resources:

/ / / the old path
FadeInImage.assetNetwork(
placeholder:'assets/images/book_placeholder.png',
image: item.book.coverImageUrl,
fit: BoxFit.cover)

/ / / new path
FadeInImage.assetNetwork(
placeholder:'images/book_placeholder.png',
image: item.book.coverImageUrl,
fit: BoxFit.cover)
Copy the code

This will display the image resource.

Then we run a few items:

flutter pub get Get third-party dependencies
webdev serve  Deploy the compiled JS to the Web server
Copy the code

If the webDev serve step fails, restart the machine and try again.

Then the default is to open the page with localhost:8080. To specify a different port number, run the following command:

webdev serve web:3002
Copy the code

After the page is opened, all network requests fail. The fault is cross-domain. The interface is cross-domain. The following adjustments need to be made on the server:

  1. Interfaces need supportOPTIONS mode
  2. OPTIONS modeThe interface of thereponse headerCross-domain support is required

Use Charles’ rewrite functionality to mock out cross-domain support for all interfaces before changing the server interface:

Well, at this point, the migration process is almost complete.

There are still some potholes left to look at when the Flutter Web stabilizes:

  1. Some of the text has a layout problem
  2. Some pictures show problems
  3. Lag, especially with window zooming, can feel like the main page rendering thread is stuck, causing the browser to drag and drop

Finally, a brief overview of the migration needs to be done:

  1. Create one with the new scaffoldFlutter WebProject, move the code over there
  2. importWay to adjust
  3. Third party dependency processing, this article simple and crude choice of source code introduction, readers can choose a more elegant way
  4. Move resources and adjust resource paths
  5. Interfaces are processed across domains

To the end.