如何迁移Flutter项目到Flutter Web

这篇简单介绍下怎么将一个现有的Flutter项目转成Flutter Web项目。

开始以前先浇一盆冷水，咱们理想中的一套代码、多端运行的愿望是要破灭了，至少目前版本的Flutter Web SDK是无法作到的。不过不要紧，谷歌爸爸已经在官网中下降了咱们的预期：

1. 项目目前只是处于technical preview状态
2. 项目是从Flutter主项目fork出来的，目前还没准备好合入主项目
3. 不是全部的Flutter API都有对应的Flutter Web实现
4. 目前Flutter Web的代码跑起来很卡，性能优化工做才刚刚开始

所以Flutter Web目前只是个半成品，踩到坑是必然的，但不妨碍咱们试着玩一玩。正好手里有一个以前开发的Flutter项目，看看转成Flutter Web要作哪些事。

首先假定读者以前已经搭好了Flutter开发环境，若是没有的话能够先看看谷歌的文档。再此基础上咱们先搭个Flutter Web的环境。

Flutter Web要求Flutter SDK的版本至少要1.5.4，先跑下flutter upgrade升级下Flutter的版本。

而后安装Flutter Web的编译工具webdev：

flutter pub global activate webdev
复制代码

具体步骤和问题能够参考官网，这里就很少说了。

而后咱们开始迁移项目。

因为目前Flutter Web和Flutter是两个不一样的SDK，二者在项目中只能二选一，因此要支持Flutter Web就不能用Flutter SDK。所以对于Flutter Web项目，目前只能新开一个项目，把原有项目中大部分搬过去。VS Code也提供了搭建新项目的脚手架：

先用这个方法建立一个新项目。能够看到pubspec.yaml中已经再也不依赖flutter了，改成依赖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

复制代码

而后把老项目中lib文件夹下的全部代码搬过去。这样之后确定会有一堆编译问题，咱们一个个来处理。

首先咱们要把import方式所有改掉，好比之前的flutter要换成flutter_web：

import 'package:flutter/material.dart'; /// 再也不适用
import 'package:flutter_web/material.dart'; /// 如今用这种

import 'dart:ui'; /// 再也不适用
import 'package:flutter_web_ui/ui.dart'; /// 如今用这种
复制代码

另外因为项目名也变了，好比以前是hello_world，如今是hello_world_web，全部相关的import也要改下。

这么作之后，若是你的项目没有任何第三方依赖的话，编译问题基本算是解决了。若是有第三方依赖，嘿嘿，这就比较麻烦了。咱们的项目就用到了以下依赖：

percent_indicator: ^2.1.1
  pull_to_refresh: ^1.5.1
  fluttertoast: ^3.1.0
  flutter_spinkit: "^3.1.0"
  modal_progress_hud: ^0.1.3
  sticky_headers: "^0.1.8"
复制代码

直接把这些依赖添加到Flutter Web项目中会报错：

Resolving dependencies...
Because percent_indicator >=1.0.6 depends on flutter any from sdk which is forbidden, percent_indicator >=1.0.6 is forbidden.
So, because iwords_web depends on percent_indicator ^2.1.1, version solving failed. 
复制代码

也就是说，这些依赖库都是基于Flutter开发的，在Flutter Web项目中不能用。。。 因而去pub.dev上找有没有对应的Web版本依赖，结果发现一个都没有。。。

为了能最终看到跑起来的效果，再恶心的事情也得干。遂决定把全部的依赖库所有源码引入工程中，而后把依赖库逐个改为支持Flutter Web的版本，这是个纯体力活，此处省略1000字。。。

这一步作完，编译问题应该没有了。接下来要处理资源问题了。

之前是经过在pubspec.yaml中指定assets路径的方式，如今一样的方法试了试不起做用。而后官网查了一圈也没说资源怎么指定，最后在Flutter Web官方的Sample代码中找到了方案：

因而把原项目中的assets文件夹搬到新项目的web文件夹下，而后引用资源的路径也调整了下：

/// 老路径
FadeInImage.assetNetwork(
placeholder:'assets/images/book_placeholder.png',
image: item.book.coverImageUrl,
fit: BoxFit.cover)

/// 新路径
FadeInImage.assetNetwork(
placeholder:'images/book_placeholder.png',
image: item.book.coverImageUrl,
fit: BoxFit.cover)
复制代码

这样图片资源就能显示出来了。

而后咱们跑一把项目：

flutter pub get # 获取第三方依赖
webdev serve  # 把编译好的js部署到web server
复制代码

若是webdev serve这一步出错的话，能够重启下机器试试。

而后默认是经过localhost:8080打开页面。若是须要指定不一样端口号，能够用下面命令：

webdev serve web:3002
复制代码

打开页面后，发现全部的网络请求都失败，查了下是跨域问题，接口都是跨域访问的。最终确认是服务端须要作以下调整：

1. 接口须要支持OPTIONS mode
2. OPTIONS mode的接口reponse header须要支持跨域

在服务端改接口以前，能够用Charles的rewrite功能来mock下，让全部接口都支持跨域：

好了，到这里，迁移过程基本完成。

还留了一些坑，等Flutter Web稳定了之后再看看：

1. 有些文字的布局出现了问题
2. 有些图片显示有问题
3. 比较卡顿，特别是窗口缩放的时候，感受是页面渲染卡主线程了，致使浏览器拖放卡顿

最后简单梳理下迁移须要作的事情：

1. 用新的脚手架建立一个Flutter Web项目，把代码搬过去
2. import方式调整
3. 第三方依赖处理，本文简单粗暴的选择了源码引入方式，读者能够选择更优雅的方式
4. 搬资源，并调整资源路径
5. 接口跨域处理

完。