flutter和webapp_Flutter全平台！迁移现有Flutter项目到WEB端
写在前面
Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 、Android、web和桌面端。
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端
怎么做？
大多数Dart代码都是共用的，需要改变的只是一些依赖和配置。
首先是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
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目录会如下图所示:
web
运行项目，可以发现和移动端基本没有区别。
image
效果还是蛮流畅的🤙。
如果你想查看release版本，可以运行
flutter pub global run webdev serve -r
如果你想发布制品，则可以运行
flutter pub global run webdev build
这会在项目的根路径下生成一个build文件夹，里面包含可以部署到服务器上的文件，如下图所示：
你可以运用gh-pages简单的将其部署到Github上，然后预览效果
写在最后
虽然说跨平台的项目很多的，比如weex、RN、Kotlin等等，但是真正让我体会到跨平台高效一体的体验还是Flutter，这也许就是为什么年后我一直在学习和从事Flutter开发的原因之一了。
当然flutter_web还处于早期阶段，一些flutter的功能还没有完全移植过来，比如高斯模糊效果，不过Flutter1.0正式版本才到来不久，相信在不久的将来，这些全都会有。
参考文档
==================== 分割线 ======================
如果你想了解更多关于MVVM、Flutter、响应式编程方面的知识，欢迎关注我。
你可以在以下地方找到我：
相关文章：
使用正则表达式构造定制的HTML5输入框
为什么80%的码农都做不了架构师？>>> 正则表达式（点此在线编辑测试）是一个功能强大的灵活而简洁的匹配文本字符串的工具，比如匹配特定的字符、单词等。正则表达式通过一个语言规则来书写，通过正则表达式处理…
idea dubbo jar error:cvc-complex-type.2.4.c: 通配符的匹配很全面, 但无法找到元素 'dubbo:application' 的声明...
声明： 出现这个错误的情形是，在idea开发环境里面运行是没有问题的，使用哦idea自带的打包工具生成jar之后，运行jar的时候报的这个错误，如果不是这个情况，这篇文章可能不适用。 主要的原因是spring.schemas、…
lwip可以用于发udp_LWIPUDP一对多
最近在STM32F767的开发板上移植了LWIP UDP的代码，开发板的资料里面有介绍LWIP移植的文档，介绍了几种网络通信方式，如TCP server，TCP client，UDP，按照文档里面的介绍也很容易实现。这里我选择的是基于ucos2操…
奇淫怪巧之给Delphi的PrintDialog增加一个页码选定范围打印的Edit
在Delphi中使用PrintDialog打印对话框的时候，这个控件有三个选项，就是PrintRang那个属性的三个选项，其中有一个选项三，让我们自定义选择页码范围来打印。但是比较蛋疼的是，这个地方选中了之后啥子效果都没有。无法制定…
进程管理（图文）
进程的图文形象表示 阮一峰–进程与线程的一个简单解释 多进程实质 现在，多核CPU已经非常普及了，但是，即使过去的单核CPU，也可以执行多任务。由于CPU执行代码都是顺序执行的，那么，单核CPU是怎么执行多任…
拿到WP官方主题Twenty Ten就是一顿nofollow伺候
2019独角兽企业重金招聘Python工程师标准>>> 今天2012-07-03，我的个人cn域名申请下来了，于是网站搬迁，暂时没有选择一个好的WordPress主题，只有用默认的Twenty Ten，不过这个主题对SEO方面还有一些欠缺&…
Qt分析：Qt中的两种定时器
QTimer类的定时器 QTimer类定时器是QObject类定时器的扩展版或者说升级版，因为它可以提供更多的功能。比如说，它支持单次触发和多次触发。 使用QTimer类定时器的步骤： （1）创建一个QTimer定时器实例：QTimer …
uestc 1012 饭卡
饭卡(card) Time Limit: 1000 ms Memory Limit: 65535 kB Solved: 253 Tried: 2169 Submit Status Best Solution Back Description 电子科大本部食堂的饭卡有一种很诡异的设计，即在购买之前判断余额。如果购买一个商品之前，卡上的剩余金额大于或等…
wps临时文件不自动删除_win10系统下wps残留文件无法删除如何解决
一位用户反馈自己在win10系统电脑中卸载金山WPS办公软件时，发现根本无法将wps残留的文件夹删除，在删除的时候提示“操作无法完成，因为其中的文件夹或文件已在另一程序打开 请关闭该文件夹文件重试”，这该怎么办呢？接下…
WEB登录H3C模拟器
思路：先将路由器与本地网卡绑定，然后将本地网卡与路由器接口ip设置在同一网段，在路由器上建立本地用户，最后登录就OK了。 1、查看本机网卡的序列号，在CMD里输入systeminfo，输出的最下…
ArcMap 通过DEM获取高程值
第一种方法：Extract values to Points工具，这个网上的资料比较多，就不介绍了。 第二种方法：Interpolate Shape工具 直接用Arc Toolbox->3D Analyst Tools->功能性表面->Interpolate Shape工具就行，可以将DEM的…
Linux进程描述符task_struct结构体简析
进程是处于执行期的程序以及它所管理的资源（如打开的文件、挂起的信号、进程状态、地址空间等等）的总称 Linux内核通过一个被称为进程描述符的task_struct结构体来管理进程，这个结构体包含了一个进程所需的所有信息。它定义在include/linux/…
hdu 1312 Red and Black 解题报告
题目链接：http://acm.hdu.edu.cn/showproblem.php?pid1312 第二条深搜，题目并不难，但是做了我好久好久，由于一个细节，让我赌上了一个晚上的时间。 题目大意：从图中的标记开始，向四个相邻的方向…
easyexcel怎么设置表头宽度_easyexcel 自动设置列宽
com.alibabaeasyexcel2.1.4导出controller层代码RequestMapping("/download")public void download(HttpServletResponse response) throws IOException {response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8…
php ImageMagick扩展
linux下安装php ImageMagick扩展模块下载ImageMagick源码包：#wget ftp://ftp.u-aizu.ac.jp/pub/graphics/p_w_picpath/ImageMagick/p_w_picpathmagick.org/ImageMagick.tar.gz 编译安装：#tar -zxvf ImageMagick.tar.gz #cd ImageMagick-xxxx-0#./confi…
调用浏览器的打印方法打印页面内容
2018-08-30 直接调用浏览器的打印方法 1、打印按钮 <a href"#" target"_self" οnclick"printme()">打印</a> 2、js //打印function printme() {$.messager.confirm(确认, 确认打印？, function (r) {if (r) {document.bo…
jsp中九大内置对象
内置组件 JSP共有以下9种基本内置组件（可与ASP的6种内部组件相对应）：1.request对象 客户端的请求信息被封装在request对象中，通过它才能了解到客户的需求，然后做出响应。它是HttpServletRequest类的实例。序号 方 法 说…
python数组越界_python 整数越界问题详解
python 内部自带大整数运算能力，整数运算不会溢出，只要内存足够，就oK下面的例子演示了两个32位整数加法的情况(通过位运算实现)，为了模拟溢出的效果，必须人工的进行位运算，~运算符除了求反，还是…
Linux虚拟机连不上网
问题：我们在使用Linux虚拟机的时候经常会出现各种各样的问题，其中的一个问题就是Linux虚拟机连不上网，这是我最近经常遇到的问题，下面提供一种方法解决这个问题 Linux网络设置 打开虚拟机依次单击【System】–>【Preferences】…
企业如何利用新闻类软文营销策划
新闻软文营销对企业的推广有哪些优势呢? 一、首先让客户有机会直接在门户网上相关频道看到关于企业产品的新闻，产生直接的点击或者评论，带来直接客户。 二、当潜在客户运用百度等搜索引擎搜索企业的公司名或者产品的关键词，那么就会在一个页…
WPF XAML 资源样式模板属性存放位置
WPF XAML 资源样式模板属性存放位置 原文:WPF XAML 资源样式模板属性存放位置WPF的XAML 资源申明 类似HTML。 整体来说分3种1.行类资源样式属性 1.1 行内属性 <Button Content"按钮" Foreground"White" FontSize"30"></Button>1.2 行…
SQL Server 数据库备份
SQL Server 数据库备份 原文 http://www.cnblogs.com/ynbt/archive/2013/04/04/2999642.html 备份数据库是指对数据库或事务日志进行复制，当系统、磁盘或数据库文件损坏时，可以使用备份文件进行恢复，防止数据丢失。 SQL Server数据库备份支持…
Linux下修改PATH环境变量
Linux下有很多环境变量，PATH就是其中的一种 PATH 可执行文件的搜索路径。ls命令也是一个程序,执行它不需要提供完整的路径名/bin/ls,然 而通常我们执行当前目录下的程序a.out却需要提供完整的路径名./a.out,这是因为PATH 环 境变量的值里面包含了ls命令所在的目…
vscode 终端 进入node_安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言最近写TypeScript需要安装、配置Node.js环境，楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中)。打开系统终端敲入命令 node -v 和 npm -v 也都有显示对应的软件包版本号，但是在VScode(Vis…
display:inline-block的妙用！！列表布局！！
如下图：像这种列表布局我们一般用 float:left; 设置宽度和高度就OK了。 但是，如果高度不同或者文字字数不同呢，再用float:left;布局就全乱了。如下图： 现在，我们可以利用display:inline-block;完美的解决这个问题。如下…
gitlab解决一些问题
一.修改gitlab端口： 打开/etc/gitlab/gitlab.rb文件，修改以下几点： external_url "http://192.168.58.62:9999"unicorn[listen] localhostunicorn[port] 9999 然后 #gitlab-ctl stop #gitlab-ctl reconfugure #gitlab-ctl start …
Linux下控制环境变量
查看环境变量 查看某一环境变量：比如我们需要查看HOME这个环境变量，我们可以在shell下直接输入echo $HOME 我们可以把所有的环境变量和环境变量的值都打印出来 打印环境变量 libc中定义的全局变量environ指向环境变量表,environ没有包含在任何头文件中,…
研究性能测试工具之systemtap入门指南（四）
运行脚本[rootBL480-64 jinyz]#stap topexe.stp输出结果： SYSCALL COUNT find 101910 oracle 1562 modclusterd 1184 pcscd 535 clustat …
linux 编译mqtt静态库_编译MQTT C++ Client
nmake -f ms\nt.mak(这是静态库,动态库是ntdll.mak)nmake -f ms\nt.mak test(测试命令,如果成功则最后显示“passed all tests”字样)nmake -f ms\nt.mak install 成功则会在C:\openss\win64目录下生成bin、include、lib、ssl四个文件夹如果需要编译动态库，nm…
ubuntu 目录结构
转载于:https://www.cnblogs.com/perfy/archive/2012/07/08/2581854.html