最新更新：

無意中翻看源碼，發(fā)現(xiàn)有趣的代碼：

代碼文件路徑:
packages/flutter/lib/src/foundation/constants.dart

你可以通過下面方式來區(qū)分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開發(fā)者大會上，發(fā)布了Flutter 1.9，更新內(nèi)容很多，其中一項就是Web sdk 合入了Flutter sdk。也就是說我們可以真正做到一套代碼打包android/ios/web/桌面(mac,windows,linux). 下面請跟著我走一邊坑。

開啟web支持

命令
flutter config --enable-web

image

轉(zhuǎn)換舊的flutter_web項目

如果你之前沒有使用package:flutter_web，那直接跳到新建一個flutter web app

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

main.dart

舊的項目在web文件夾下面自動生成了一個main.dart

image

里面主要做的事情是webOnlyInitializePlatform初始化，這個代碼跟桌面版本是相似的，并且引導(dǎo)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中，不再需要設(shè)置，而且web文件夾里面也不需要這個main.dart了。

我們隨便看一下桌面版本的設(shè)置

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

引用

從web sdk轉(zhuǎn)換為flutter sdk

image

字體

之前會發(fā)現(xiàn)，flutter for web里面的一些icon全部都不能顯示。官方也解釋了，之前的web demo其實沒有將icon的字體文件加入，自然是不顯示。最終的產(chǎn)物中就會有FontManifest.json文件來指示字體文件

flutter:
  uses-material-design: true

assets

之前的assets 你需要寫在web文件夾下面才能生效，現(xiàn)在資源文件跟Flutter使用使用是一樣的了。

引用

引用終于統(tǒng)一了，開心

image

運(yùn)行

命令從
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
執(zhí)行命令
flutter config --enable-web，如果報錯，說明sdk不對。
再執(zhí)行flutter devices

image

有Chrome，說明ok了

創(chuàng)建

我們可以先創(chuàng)建一個Flutter 應(yīng)用，然后再執(zhí)行flutter create .就會生成一個web的文件夾，包含index.html文件

注意命令后面有一個點

運(yùn)行

flutter run -d chrome
flutter run -d chrome --release/--profile
或者vscode中選擇chrome，然后start debug
第一次會下載web sdk

image

打包

flutter build web 執(zhí)行成功之后，會在build文件夾里面生成web文件夾，build產(chǎn)物全部在里面

image

image

image

可以看到在yaml里面定義的資源也被放到asset文件夾里面

  assets:
     - assets/

平臺區(qū)分

由于web是不支持 dart:io，那么我們一份代碼怎么做到統(tǒng)一打包編譯？
之前提到過桌面需要在入口設(shè)置平臺為TargetPlatform.fuchsia

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

那我們怎么處理這個情況呢？我們下面說一下條件引入和導(dǎo)出

條件 import/export

條件導(dǎo)入導(dǎo)出在dart 1和dart 2之中有所不同
在dart2中我們可以使用dart.library.io和dart.library.js 區(qū)分能夠調(diào)用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";

創(chuàng)建io和web的文件

拿config_helper.dart這個類來舉一個例子，它是用來緩存配置信息的：

• 在桌面上面是寫到目錄下面的文件里面

• 而對于web來說，調(diào)用的通過js來操控localStorage

  
  
  image
  
  

  分別在config_helper_io.dart和congfig_helper_web.dart中分別按照自己的平臺進(jìn)行實現(xiàn)就好了，然后在config_helper.dart中導(dǎo)出，用于調(diào)用

期待改進(jìn)

• yaml 文件

yaml里面有一些引用，比如資源文件，字體文件，可能這個平臺需要，另外的平臺不需要。
現(xiàn)在的方式是沒法做區(qū)別，唯一的方式就只能是打包之后，用腳本來做移除 或者主入口創(chuàng)建不同的項目

• 代碼

現(xiàn)在還沒辦法根據(jù)平臺來選擇是否執(zhí)行某行代碼，現(xiàn)在只能把他們放到不同的文件，根據(jù)平臺來import。希望能像C#一樣增加可以添加平臺symbol

image

結(jié)語

周末把 JsonToDart 工具的Flutter部分,代碼結(jié)構(gòu)從

image

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

image