Flutter全平臺！遷移現有Flutter項目到WEB端

時間 2019-11-06

標籤 javascript html java git github web 編程 json 瀏覽器服務器欄目 HTML 简体版

原文原文鏈接

寫在前面

Flutter 是 Google推出並開源的移動應用開發框架，主打跨平臺、高保真、高性能。開發者能夠經過 Dart語言開發 App，一套代碼同時運行在 iOS 、Android、web和桌面端。javascript

Flutter官網：flutter-io.cnhtml

Flutter_web是Flutter代碼兼容web的實現，能夠將使用Dart編寫的現有Flutter代碼編譯成能夠嵌入瀏覽器並部署到任何Web服務器的客戶端。java

Our goal is to enable building applications for mobile and web simultaneously from a single codebase. However, to allow experimentation, the tech preview Flutter for web is developed in a separate namespace. So, as of today an existing mobile Flutter application will not run on the web without changes.git

Flutter的目標是經過單一代碼庫同時構建移動和Web應用程序。可是，爲了進行實驗，Flutter_web是在一個單獨的命名空間中開發的。所以，截至目前，現有的移動Flutter應用程序沒法在不進行更改的狀況下在Web上運行。github

簡而言之就是Flutter如今還不支持既是移動應用也是Web應用，須要本身進行遷移，但相信日子不會太遠。web

遷移Flutter項目到WEB端

此次咱們遷移的項目是flutter_challenge_googlemaps，效果圖以下：編程

怎麼作？

大多數Dart代碼都是共用的，須要改變的只是一些依賴和配置。json

首先是pubspec.yaml須要用flutter_web來替換flutter，同時移除asset和字體相關的代碼。瀏覽器

name: flutter_web_challenge_googlemaps

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any


dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.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
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test
複製代碼

經過flutter package get更新依賴後，須要更新lib路徑下dart文件中的相關引用。服務器

//flutter
import 'package:flutter/material.dart';
//flutter web
import 'package:flutter_web/material.dart';
複製代碼

差異就是將flutter替換爲flutter_web而已，代碼基本不用動。

接下來，爲了預覽網頁，咱們須要本身建立web目錄，並在目錄下建立web/index.html 和 web/main.dart文件。

web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
複製代碼

web/main.dart

import 'package:flutter_web_ui/ui.dart' as ui;
// 將flutter_web_challenge_googlemaps替換爲本身的package
import 'package:flutter_web_challenge_googlemaps/main.dart' as app;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

複製代碼

至於資源文件、圖片、字體等，和Flutter項目不一樣，這些都須要放到web\assets目錄路徑下，同時要記得更新代碼中的相關引用。

Image.asset("assets/logo.ong");
// 須要更改成
Image.asset("logo.png");

複製代碼

若是你有使用Material Icon的話，你須要在web/assets目錄下建立FontManifest.json文件，並添加相關地址。

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
 
]

複製代碼

整個web目錄會以下圖所示: