阅读 5262

Flutter for web 最新填坑

最新更新:

无意中翻看源码,发现有趣的代码:

代码文件路径: packages/flutter/lib/src/foundation/constants.dart

你可以通过下面方式来区分web还是io,哈哈哈,这是隐形的吐槽 js吗?

/// A constant that is true if the application was compiled to run on the web.
///
/// This implementation takes advantage of the fact that JavaScript does not
/// support integers. In this environment, Dart's doubles and ints are
/// backed by the same kind of object. Thus a double `0.0` is identical
/// to an integer `0`. This is not true for Dart code running in AOT or on the
/// VM.
const bool kIsWeb = identical(0, 0.0);
复制代码

Goolge开发者大会上,发布了Flutter 1.9,更新内容很多,其中一项就是Web sdk 合入了Flutter sdk。也就是说我们可以真正做到一套代码打包android/ios/web/桌面(mac,windows,linux). 下面请跟着我走一边坑。

开启web支持

命令 flutter config --enable-web

开启之后,我们可以看到device中多了Chrome和Server的web选项。

转换旧的flutter_web项目

如果你之前没有使用package:flutter_web,那直接跳到新建一个flutter web app

官方wiki地址 Upgrading from package:flutter_web to the Flutter SDK

main.dart

旧的项目在web文件夹下面自动生成了一个main.dart

里面主要做的事情是webOnlyInitializePlatform初始化,这个代码跟桌面版本是相似的,并且引导lib下面的main.dart的入口

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

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}
复制代码

在新的web中,不再需要设置,而且web文件夹里面也不需要这个main.dart了。

我们随便看一下桌面版本的设置

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
复制代码

引用

从web sdk转换为flutter sdk

字体

之前会发现,flutter for web里面的一些icon全部都不能显示。官方也解释了,之前的web demo其实没有将icon的字体文件加入,自然是不显示。最终的产物中就会有FontManifest.json文件来指示字体文件

flutter:
  uses-material-design: true
复制代码

assets

之前的assets 你需要写在web文件夹下面才能生效,现在资源文件跟Flutter使用使用是一样的了。

引用

引用终于统一了,开心

运行

命令从 webdev serve或者 pub run build_runner serve 变成了flutter run -d chrome

新建一个flutter web app

官方wiki地址Building a web application with Flutter

sdk 1.9

首先我们要确保Flutter sdk 大于等于1.9 执行命令 flutter config --enable-web,如果报错,说明sdk不对。 再执行flutter devices

有Chrome,说明ok了

创建

我们可以先创建一个Flutter 应用,然后再执行flutter create .就会生成一个web的文件夹,包含index.html文件

注意命令后面有一个点

运行

flutter run -d chrome flutter run -d chrome --release/--profile 或者vscode中选择chrome,然后start debug 第一次会下载web sdk

打包

flutter build web 执行成功之后,会在build文件夹里面生成web文件夹,build产物全部在里面

可以看到在yaml里面定义的资源也被放到asset文件夹里面

  assets:
     - assets/
复制代码

平台区分

由于web是不支持 dart:io,那么我们一份代码怎么做到统一打包编译? 之前提到过桌面需要在入口设置平台为TargetPlatform.fuchsia

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
复制代码

那我们怎么处理这个情况呢?我们下面说一下条件引入和导出

条件 import/export

条件导入导出在dart 1和dart 2之中有所不同 在dart2中我们可以使用dart.library.iodart.library.js 区分能够调用io api(android/ios/桌面)还是web

import 'main_web.dart' if (dart.library.io) "main_io.dart";
export 'config_helper_web.dart' if (dart.library.io)"config_helper_io.dart";
复制代码

创建io和web的文件

拿config_helper.dart这个类来举一个例子,它是用来缓存配置信息的:

  • 在桌面上面是写到目录下面的文件里面
  • 而对于web来说,调用的通过js来操控localStorage
    分别在config_helper_io.dart和congfig_helper_web.dart中分别按照自己的平台进行实现就好了,然后在config_helper.dart中导出,用于调用

期待改进

  • yaml 文件

yaml里面有一些引用,比如资源文件,字体文件,可能这个平台需要,另外的平台不需要。 现在的方式是没法做区别,唯一的方式就只能是打包之后,用脚本来做移除 或者主入口创建不同的项目

  • 代码

现在还没办法根据平台来选择是否执行某行代码,现在只能把他们放到不同的文件,根据平台来import。希望能像C#一样增加可以添加平台symbol

结语

周末把 JsonToDart 工具的Flutter部分,代码结构从

改成了共用一套代码,感兴趣的同学可以查看Josn To Dart。 欢迎加入Flutter Candies,一起生产可爱的Flutter小糖果(QQ群:181398081)

最最后放上Flutter Candies全家桶,真香。

关注下面的标签,发现更多相似文章
评论