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.io和dart.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全家桶，真香。