如何遷移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. 接口跨域處理

完。