Prior to Flutter 1.9, Web development was done via Flutter_web. So how do you migrate it?

Upgrading from package: Flutter_web to the Flutter SDK

Flutter environment

First you need to upgrade your Flutter to >= 1.9.

$ flutter channel master
$ flutter upgrade
Copy the code

Confirm the version you installed, 2019/9/20:

$flutter version flutter 1.10.6 - pre. 7, the channel master, https://github.com/flutter/flutter.git Framework, revision D445304168 (25 hours ago) • Revision 7FB14000fd Tools • Dart 2.6.0 (build 1.0 cb80ea7ba9) server - dev.Copy the code

Enabling Web Support

To enable web support, run the following command:

$ flutter config --enable-web
Copy the code

deleteweb/directory

In the existing flutter_web root directory, there is similar code in web/main.dart:

import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:example/main.dart' as app;

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

If you have other existing files in this directory, for example I have an assets directory (images, fonts, etc.). Move it to the project root directory first (or back it up somewhere else). The changes to the resource file are described below.

Now we need to remove the Web directory file.

reinitializationweb/directory

Flutter has a Web runner: it can be initialized using the Flutter create command

$ flutter create .
Copy the code

There will be a newly generated Web /index.html in your project.

updatepubspec.yml

Before:

dependencies:
  flutter_web: any
  flutter_web_ui: any
Copy the code

Need to become:

dependencies:
  flutter:
    sdk: flutter
Copy the code

Update font Configuration

Remove the fontmanifest. json file to specify the font in a standard way, see this article.

If you use the Material Design icon, add it in pubspec.yml

flutter:
  uses-material-design: true
Copy the code

Mobile assets

The resource files need to be placed in the root directory of the project and specified in pubspec.yaml:

flutter:
 assets:
   - preview.png
Copy the code

Alternatively, if there is another resource directory named my_assets in the root directory, you need to specify this directory in the configuration

flutter:
 assets:
   - my_assets/
Copy the code

To change theimports

Any import that uses package:flutter_web should be replaced with package:flutter, for example:

import 'package:flutter_web/material.dart';
import 'package:flutter_web_ui/ui.dart';
Copy the code

Changed to:

import package:'flutter/material.dart';
import 'dart:ui';
Copy the code

Flutter for Web still has problems

  • Since version 1.9, Flutter has added Web support, but lacks some features and has known performance issues that have not been resolved. Deploying Web applications to a production environment is not recommended
  • Web Apps do not support Hot Reload.
  • It is not supported yetflutter plugins
  • Does not supportdart:ioThe network request needs to be usedhttpLibrary.
  • Does not supportPlatform.is

conclusion

In the continuous update and iteration optimization of FLUTTER, Flutter_web was integrated into flutter, which boosted the enthusiasm of flutter for Web to a certain extent. Believe that Flutter will bring us more surprises!

For actual operations, see SwiftClub/Site

To read more, you can follow SwiftOldBird’s wechat official account: