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目录会以下图所示: