当前位置:   article > 正文

Flutter全平台!迁移现有Flutter项目到WEB端

flutter gstatic

写在前面

Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 、Android、web和桌面端。

Flutter官网:flutter-io.cn

Flutter_web是Flutter代码兼容web的实现,可以将使用Dart编写的现有Flutter代码编译成可以嵌入浏览器并部署到任何Web服务器的客户端。

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.

Flutter的目标是通过单一代码库同时构建移动和Web应用程序。 但是,为了进行实验,Flutter_web是在一个单独的命名空间中开发的。 因此,截至目前,现有的移动Flutter应用程序无法在不进行更改的情况下在Web上运行。

简而言之就是Flutter现在还不支持既是移动应用也是Web应用,需要自己进行迁移,但相信日子不会太远。

迁移Flutter项目到WEB端

这次我们迁移的项目是flutter_challenge_googlemaps,效果图如下:

怎么做?

大多数Dart代码都是共用的,需要改变的只是一些依赖和配置。

首先是pubspec.yaml需要用flutter_web来替换flutter,同时移除asset和字体相关的代码。

  1. name: flutter_web_challenge_googlemaps
  2. environment:
  3. # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  4. sdk: '>=2.3.0-dev.0.1 <3.0.0'
  5. dependencies:
  6. flutter_web: any
  7. flutter_web_ui: any
  8. dev_dependencies:
  9. build_runner: ^1.4.0
  10. build_web_compilers: ^2.0.0
  11. dependency_overrides:
  12. flutter_web:
  13. git:
  14. url: https://github.com/flutter/flutter_web
  15. path: packages/flutter_web
  16. flutter_web_ui:
  17. git:
  18. url: https://github.com/flutter/flutter_web
  19. path: packages/flutter_web_ui
  20. flutter_web_test:
  21. git:
  22. url: https://github.com/flutter/flutter_web
  23. path: packages/flutter_web_test
  24. 复制代码

通过flutter package get更新依赖后,需要更新lib路径下dart文件中的相关引用。

  1. //flutter
  2. import 'package:flutter/material.dart';
  3. //flutter web
  4. import 'package:flutter_web/material.dart';
  5. 复制代码

差别就是将flutter替换为flutter_web而已,代码基本不用动。

接下来,为了预览网页,我们需要自己创建web目录,并在目录下创建web/index.htmlweb/main.dart文件。

web/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script defer src="main.dart.js" type="application/javascript"></script>
  7. </head>
  8. <body>
  9. </body>
  10. </html>
  11. 复制代码

web/main.dart

  1. import 'package:flutter_web_ui/ui.dart' as ui;
  2. // 将flutter_web_challenge_googlemaps替换为自己的package
  3. import 'package:flutter_web_challenge_googlemaps/main.dart' as app;
  4. main() async {
  5. await ui.webOnlyInitializePlatform();
  6. app.main();
  7. }
  8. 复制代码

至于资源文件、图片、字体等,和Flutter项目不同,这些都需要放到web\assets目录路径下,同时要记得更新代码中的相关引用。

  1. Image.asset("assets/logo.ong");
  2. // 需要更改为
  3. Image.asset("logo.png");
  4. 复制代码

如果你有使用Material Icon的话,你需要在web/assets目录下创建FontManifest.json文件,并添加相关地址。

  1. [
  2. {
  3. "family": "MaterialIcons",
  4. "fonts": [
  5. {
  6. "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
  7. }
  8. ]
  9. }
  10. ]
  11. 复制代码

整个web目录会如下图所示:

运行项目,可以发现和移动端基本没有区别。

效果还是蛮流畅的?。

如果你想查看release版本,可以运行

flutter pub global run webdev serve -r

如果你想发布制品,则可以运行

flutter pub global run webdev build

这会在项目的根路径下生成一个build文件夹,里面包含可以部署到服务器上的文件,如下图所示:

你可以运用gh-pages简单的将其部署到Github上,然后预览效果

flutter-ui-challenges.github.io/flutter_web…

关于如何运用gh-pages进行页面预览,可以查看此链接:www.cnblogs.com/MuYunyun/p/…

写在最后

虽然说跨平台的项目很多的,比如weex、RN、Kotlin等等,但是真正让我体会到跨平台高效一体的体验还是Flutter,这也许就是为什么年后我一直在学习和从事Flutter开发的原因之一了。

当然flutter_web还处于早期阶段,一些flutter的功能还没有完全移植过来,比如高斯模糊效果,不过Flutter1.0正式版本才到来不久,相信在不久的将来,这些全都会有。

最后附上相关地址:github.com/flutter-ui-…,本文是为了方便查看所以新开了一个仓库,实际上只需要新开一个web分支就可以了。

参考文档

flutter_web:github.com/flutter/flu…

迁移指南:github.com/flutter/flu…

==================== 分割线 ======================

如果你想了解更多关于MVVM、Flutter、响应式编程方面的知识,欢迎关注我。

你可以在以下地方找到我:

简书:www.jianshu.com/u/117f1cf0c…

掘金:juejin.im/user/582d60…

Github: github.com/ditclear

转载于:https://juejin.im/post/5cf398c86fb9a07f0a2dc8f1

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/739787
推荐阅读
相关标签
  

闽ICP备14008679号