如何迁移Flutter项目到Flutter Web?

时间: 2019-08-12阅读: 436标签: 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. 比较卡顿,特别是窗口缩放的时候,感觉是页面渲染卡主线程了,导致浏览器拖放卡顿

最后简单梳理下迁移需要做的事情:

Flutter Web
import

完。

原文:http://www.cocoachina.com/articles/29430


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/4653

5 张图描绘Web3 堆栈全景

Web3 堆栈最令人难以置信的一点是,它们不需要任何集中协调就可以组合在一起。开发本身是去中心化的。没有主架构师。这与地球上几乎所有其他的开发堆栈项目形成了鲜明的对比。在 Linux 基金会,少数人设定整个 Linux 的方向

web开发新手应该知晓的20件事

在我当初刚从事 web 开发的时候,有很多重要的事我并没有事先了解。现在看来,我的很多期望都和现实有很大的差距。在这篇文章里,我会告诉你 20 件事情,这些都是在你准备开始或者刚开始 web 开发不久的时候就应该知晓的

Web前端开发的应用和前景:web 1.0到web 3.0

web3.0时代,前端做着前端的工作,尽自己可能去在多端的世界去为用户体验努力,后端去做着后端的工作,去更好的处理数据,利用人工智能?利用爬虫?将数据充分的使用,为用户分析数据,给予用户最想要的数据。

W3C是什么?IETF是什么?

无规矩不成方圆,软件开发当然不能例外。Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准。Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循

Gavin Wood:创造一个web3.0的加密世界

我最早是以太坊的联合创始人,也是CTO,黄皮书的作者。当开启以太坊时,我们是局外人,关注的焦点更多的是BTC。当时,人们将投身以太坊视为浪费时间和精力。但现在以太坊已经成长起来,进入了完整循环。但与此同时

web页面的回流和重绘

什么是回流? 回流也叫重排(reflow),当页面中的元素发生影响布局的变化,比如:改变宽高,修改显示影藏。页面需要重新布局,就会触发重排。 简单的说就是,页面布局改变,就会触发重排。

Web实现前后端分离,前后端解耦

前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务

为什么说 Web 开发的未来在于组件?

预测未来并非易事。在预测社会现象的未来趋势时,我们不能认为未来就是当下现状的简单线性延伸——而 Web 开发就是一种社会现象

web的应用模式

在开发web应用中,有两种模式:1、前后端分离。2、前后端不分离。在前后端分离的应用模式中,我们通常将后端开发的每个视图都成为一个接口。或者API。前端通过访问接口来对数据进行增删改查。

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全