Flutter Web实战项目打造真正跨平台应用(windows,android,ios,linux,macos,web)
Flutter Web项目
Flutter 最近发布了 Flutter V2.5.1,其性能得到了很大提升,支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外,我们创建了一个具有自定义悬停动画的动画网络菜单。 最后,您将学习如何使用 Flutter 制作响应式应用程序。
目前已新增桌面支持
预览地址:http://47.117.1.68:251/#/
哔哩哔哩
https://www.bilibili.com/video/BV1oA411T7nD?spm_id_from=333.999.0.0
项目地址
github
https://github.com/ITmxs/Flutter–Mobile-Tablet-and-Web
gitee
https://gitee.com/itmxs/Flutter–Mobile-Tablet-and-Web/
文章目录
- Flutter Web项目
- 使用fvm版本控制
- 全局激活
- 勾号表示该版本正在您的项目中运行。
- 如果你的是旧项目添加 fvm
- 博客项目迁移空安全教程
- 1. 创建分支命名为
- 2.执行flutter doctor
- 3.查看`dart`版本,是否为`2.12`或更高
- 4. 检查所有依赖的迁移状态
- 5.升级依赖
- 6. 迁移
- 6.1使用迁移工具
- 理解迁移的结果
- 改进迁移的结果
- 只迁移部分文件
- 6.2手动迁移
- 6.3.分析
- 6.4测试
- 7发布web版
- 1. 创建web文件夹
- 2. 打包web版本
- 3**结论**
- 坑1: 找到了index.html,用浏览器打开一片空白
- 坑2: 已经用nginx代理,用浏览器打开还是一片空白
- 8发布windows版
- 1.为现有的 Flutter 应用程序添加桌面支持
- 2..创建main_desktop.dart文件
- 3.hover安装和环境配置
- 4.初始化,并打包
- 坑1
Flutter 最近发布了 Flutter V2.5.1,其性能得到了很大提升,支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外,我们创建了一个具有自定义悬停动画的动画网络菜单。 最后,您将学习如何使用 Flutter 制作响应式应用程序。
目前已新增桌面支持
主分支默认空安全
使用fvm版本控制
全局激活
pub global activate fvm
打印已安装的 fvm 列表fvm list,
通过运行fvm use 2.5.1(在我的例子中是 12.5.1,它可能会根据您所需的版本而有所不同)命令选择要使用的 Flutter SDK 版本,如果尚未安装,它将下载 SDK;
现在,您可以通过运行来检查项目中是否正在运行 flutter flutter;
此外,您还可以通过再次调用来检查 Flutter SDK 版本是否设置fvm list。
勾号表示该版本正在您的项目中运行。
fvm use 2.5.1–force
如果你的是旧项目添加 fvm
对于就项目我们如果想切到 fvm 的 flutter 环境,这个步骤还是非常简单的。
在项目根路径下执行:
$ fvm use 2.5.1–force
完成上面的命令,会有个 .fvm 文件夹生成,然后配置 IDE,方法同上。
可以愉快的玩耍 flutter 了。
博客项目迁移空安全教程
1. 创建分支命名为
flutter2.5.1_null-safety
,并切换到新分支。
2.执行flutter doctor
3.查看dart
版本,是否为2.12
或更高
4. 检查所有依赖的迁移状态
通过以下命令检查你的 package 的迁移状态
dart pub outdated --mode=null-safety
上面的输出说明了所有依赖的 package 都有可使用的已支持空安全的预发布版本。
5.升级依赖
在迁移你的 package 的代码之前,请将它的依赖项升级至空安全版本。
运行
dart pub upgrade --null-safety
将依赖升级至支持空安全的最新版本。 注意: 该命令会更改你的pubspec.yaml
文件。dart pub upgrade --null-safety
运行
dart pub upgrade
。dart pub upgrade
6. 迁移
你的代码里大部分需要更改的代码,都是可以轻易推导的。例如,如果一个变量可以为空,它的类型需要 ?
后缀。一个不可以为空的命名参数,需要使用 required
标记。
针对迁移,你有两个选项可以选择:
- 使用迁移工具,它可以帮你处理大多数可推导的变更。
- 自己动手,丰衣足食。
6.1使用迁移工具
迁移工具会带上一个非空安全的 package ,将它转换至空安全。你可以先在代码中添加 提示标记
开始转换前,请做好如下的准备:
- 使用最新的 Dart SDK 稳定版本。
- 运行
dart pub outdated --mode=null-safety
以确保所有依赖为最新且空安全。
在包含 pubspec.yaml
的目录下,执行 dart migrate
命令,启动迁移工具。
dart migrate
如果你的 package 可以进行迁移,工具会输出类似以下的内容:
使用 Chrome 浏览器访问 URL,你可以看到一个交互式的界面,引导你进行迁移:
理解迁移的结果
若要了解每个变化(或者未变化)的原因,点击 Proposed Edits 窗口中的行数,原因会出现在 Edit Details 窗口中。
点击 line 3 链接,你可以看到迁移工具添加 !
的原因。而因为你知道 zero
不会为空,所以你可以改进迁移结果。
改进迁移的结果
当分析结果推导了错误的可空性时,你可以添加临时的提示标记来改变建议的编辑:
在迁移工具的 Edit Details 窗格中,你可以通过 Add
/\*?\*/
hint 和 Add/\*!\*/
hint 按钮来添加提示标记。按下这些按钮,相应的标记会立刻添加到代码中,并且 无法撤销。如果你想删除标记,可以和平常一样使用代码编辑器删除它。
就算迁移工具正在运行,你也可以使用编辑器添加提示标记。由于你的代码还未迁移到空安全,所以无法使用空安全的新特性。但是你可以进行与空安全无关的改动,例如重构。
当你完成编辑后,点击 Rerun from sources 进行更改。
只迁移部分文件
尽管我们希望你能一次性完成迁移工作,但对于大体量的应用或 package 而言并不是简单的事。如果你想只迁移部分文件,请将暂时不迁移的文件前方的绿色勾选框取消勾选。
6.2手动迁移
如果你不想使用迁移工具,你也可以手动进行迁移。
我们推荐你 优先迁移最下层的库 —— 指的是没有导入其他 package 的库。接着迁移直接依赖了下层库的依赖库。最后再迁移依赖项最多的库。
举个例子,假设你的 lib/src/util.dart
导入了其他(空安全)的 package 和核心库,但它没有包含任何 import '<本地路径>'
的引用。那么你应当优先考虑迁移 util.dart
,然后迁移依赖了 util.dart
的文件。如果有一些循环引用的库(例如 A 引用了 B,B 引用了 C,C 引用了 A),建议同时对它们进行迁移。
手动对 package 进行迁移时,请参考以下步骤:
编辑 package 的
pubspec.yaml
文件,将最低 SDK 版本设置到至少为2.12.0
:environment:sdk: '>=2.12.0 <3.0.0'
重新生成 package 的配置文件:
$ dart pub get
在版本最低是
2.12.0
的 SDK 上运行dart pub get
时,会将每个 package 的默认 SDK 最低版本设定为 2.12,并且默认它们已经迁移至空安全。在你的 IDE 上打开package 。
你也许会看到很多错误,没关系,让我们继续。利用分析器来辨析静态错误,逐个迁移 Dart 文件。
按需添加?
、!
、required
以及late
来消除静态错误。
6.3.分析
更新你的 package(在 IDE 或命令行工具中使用 dart pub get
)后在 IDE 或命令行工具中对你的代码进行 静态分析:
$ dart pub get
$ dart analyze # or `flutter analyze`
6.4测试
如果你的代码通过了分析,接下来可以开始测试:
$ dart test # or `flutter test`
你可能需要更新使用了空值作为预期用例的测试代码。
如果你需要对代码作出大量的更改,那么你可能需要重新对代码进行迁移。这时请先回滚代码更改,再运行迁移工具进行迁移。
7发布web版
我们希望你完成迁移后尽快将其发布,可以作为预览版:
参考文章:
https://dart.cn/null-safety/migration-guide
细心的小伙伴可能会发现,安卓有android文件夹, iOS 有ios的文件夹,但目前目录结构是没有web文件夹的,
1. 创建web文件夹
输入下面的命令创建web文件
flutter create .
然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图
2. 打包web版本
我们知道要给android手机用,需要打包apk出来, 要给iPhone手机用,需要打包ipa出来;同样的道理要给浏览器用,也需要打包web相关代码.
flutter build web --web-renderer htmlflutter build web flutter build web --web-renderer canvaskit
这将生成包括资源的应用程序,并将文件放入项目的 /build/web
目录中。
一般的应用程序的 release 版本具有以下结构:
content_copy
/build/webassetsAssetManifest.jsonFontManifest.jsonNOTICESfontsMaterialIcons-Regular.ttf<other font files><image files>index.htmlmain.dart.jsmain.dart.js.map
启动 Web 服务器(例如,python -m SimpleHTTPServer 8000
,或使用 dhttpd package),然后打开 /build/web 目录。在浏览器中访问 localhost:8000
(前文用 Python 启动的服务器)以查看应用程序的 release 版本。
经过测试,上面三种方式都可以打包web版本, 其中第一种是针对移动端的打包方式, 第二种是一般的打包方式, 第三种是针对pc端的打包方式.
那这3种方式打包出来,运行起来有什么不同呢
flutter build web --web-renderer html 打开速度最快,兼容性好(是指ie,chrome,safari等浏览器兼容)
flutter build web 打开速度一般,兼容性好
flutter build web --web-renderer canvaskit 打开速度最慢,兼容性好
3结论
就是使用第一种打包方式会比较好
flutter build web --web-renderer html
坑1: 找到了index.html,用浏览器打开一片空白
这个属于正常的, 这个不像前端web ,html css js那套,点击index.html就能访问的. 在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等
坑2: 已经用nginx代理,用浏览器打开还是一片空白
那是因为文件路径引用不对.解决办法有2种
方法1:
用编辑器打开index.html,能看到源文件,把,改成
方法2:
用编辑器打开index.html,能看到源文件,把,改成你服务器的路径比喻说:
然后nginx代理
#flutterserver {listen 251 ;server_name flutterblog;location / {root /root/study/flutter/web/;index index.html index.htm;# proxy_pass http://127.0.0.1:12345;# access_log /usr/local/nginx/logs/go.101.log ;}}
```undefined
撒花
8发布windows版
我们希望你完成迁移后尽快将其发布,可以作为预览版:
参考文章:
https://dart.cn/null-safety/migration-guide
迁移桌面
flutter config --enable--desktop
1.为现有的 Flutter 应用程序添加桌面支持
要将桌面支持添加到现有 Flutter 项目,请从项目根目录在终端中运行以下命令:
$ flutter create --platforms=windows,macos,linux .
这会将必要的桌面文件和目录添加到您现有的 Flutter 项目中。要仅添加特定桌面平台,请将platforms
列表更改为仅包含您要添加的平台。
必须下载vs
https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16
可以看到build目录下已经有windows
2…创建main_desktop.dart文件
比如我的main.dart文件是这样的
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:outlook/constants.dart';
import 'package:outlook/screens/main/main_screen.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter blog',theme: ThemeData(),home: MainScreen(),);}
}
那么我的main_desktop.dart文件就是这样的
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:outlook/constants.dart';
import 'package:outlook/screens/main/main_screen.dart';void main() {debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;//这句话很关键runApp(MyApp());
}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter blog',theme: ThemeData(),home: MainScreen(),);}
}
flutter和go都是google出品,如何安装做一下不做介绍
3.hover安装和环境配置
go get -u github.com/go-flutter-desktop/hover
稍等会hover就会出现在go语言的SDK下面的bin文件夹下
你又会发现报错:**exec: “gcc”: executable file not found in %PATH%**这是缺少一个环境变量,别急,补上去,
https://sourceforge.net/projects/mingw-w64/files/mingw-w64/
安装过程会下载很多东西,都到这一步了,不要放弃,接下来配置环境变量
C:\Program Files (x86)\mingw-w64\i686-6.2.0-posix-sjlj-rt_v5-rev1\mingw32\bin
4.初始化,并打包
接下来,我们到你的flutter项目的目录下面
hover init github.com/my-organization/flutter_bloc_super #前面的地址固定,后面写你项目的名字
就会出现一个go文件夹
生成这个文件之后再执行,
hover run
最后一步大功告成
变身!!!!!
如图的路径就是打包后生成的exe文件,双击执行,就好了。
坑1
如果报错goland编译报错cc1.exe: sorry, unimplemented: 64-bit mode not compiled in
主要原因是本地的cc1.exe版本不是64位的,在64位环境下无法编译
请下载这个、https://sourceforge.net/projects/mingw-w64/
Flutter Web实战项目打造真正跨平台应用(windows,android,ios,linux,macos,web)相关推荐
- (上)小程序从0快速入门到实战项目打造个性简历,让你轻松脱颖而出吸引面试官眼球(附源码)
前言 分享之前我们先来认识一下小程序,官方定义的微信小程序是一种新的开放能力,开发者可以快速地开发一个小程序.更是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体 ...
- 【Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )
文章目录 一.Native 应用 二.Web 应用 三.Hybrid 应用 四.ReactNative 应用 五.Flutter 应用 一.Native 应用 原生应用开发 : Android / i ...
- 《黑客攻防技术宝典Web实战篇@第2版》读书笔记1:了解Web应用程序
读书笔记第一部分对应原书的第一章,主要介绍了Web应用程序的发展,功能,安全状况. Web应用程序的发展历程 早期的万维网仅由Web站点构成,只是包含静态文档的信息库,随后人们发明了Web浏览器用来检 ...
- 电商移动Web实战项目(1)
移动web基础 移动端开发现状 移动web开发指的是需要适配移动设备的网页开发 移动web开发与pc端web开发没有本质的区别,使用的还是HTML/CSS/JavaScript的技术 移动web开发与 ...
- 电商移动Web实战项目(5)
响应式 什么是响应式布局 响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机.平板.pc电脑.手表, ...
- 【javaWeb】第50天—— WEB实战项目二
通用的servlet设计: 编写一个servlet,重写doget() 在doget方法中我们编写了 if else if - 在页面中 超链接 继续抽取:BaseServlet extends Ht ...
- Android ios javascript php web等百度云盘资源
* 这是一些学习资源,里面有Android的,ios的,php的,大数据的, Java的,web前端的,C++,python的-.* 来源地址是在一个公众号的群.感谢群主的分享.在此我也分享给大家.如 ...
- 深度解析:面试官问你项目经验到底能问多细?(附实战项目)
马上年关了,很多准备拿完年终跑路的小伙伴们可以看过来啦,为年后跳槽做点准备:暂时不准备挪窝的也可以来看看,有备无患嘛 面试难点 其实面试同一个岗位的话,大家的基础知识技能都差不多,面试官一般都是通过你 ...
- JavaWeb实战项目-登录审批功能-付强-专题视频课程
JavaWeb实战项目-登录审批功能-134人已学习 课程介绍 在eclipse中进行web开发,熟练掌握HTML.Javaspript.CSS.JSP.Servlet.Oracle. ...
最新文章
- SaaS项目管理软件有什么用?
- android ListView中长按背景颜色可见性设置
- java子类对象不能调用父类protected方法和域的原因。
- pytorch笔记:实例解析NLLLoss和CrossEntropyLoss
- java.lang.NumberFormatException: multiple points错误问题
- AUTOSAR从入门到精通100讲(十)-DoIP协议介绍
- python利用pandas存数据并且展示csv
- 【mysql问题】can't connect to mysql server on 'localhost' (10060)
- vue-router(2.0)
- android横向滑动缩放,移动端实现内容左右滑动,并点击放大效果的问题
- centos 安装mysql5.6.22_CentOS 6.4 安装MySQL 5.6.22
- C语言基础:如何判断素数(质数)与合数
- android真机测试什么不同,android真机测试闪退
- 如何使用图片的exif信息计算相机焦距
- 案例 | 巴别鸟为弘睿构建企业知识库
- Java之各平台快递对接
- 布线工程施工经验介绍 解决XP局域网访问故障
- 无源晶振电路设计和改进
- (优化解决)低时间解决偶位回文
- 【汉字编码几个字节】
热门文章
- 八皇后问题初始思路python_Python 学习笔记(一)10行代码解决八皇后问题
- python多线程网络编程_python网络编程之线程
- matlab上机实验报告,MATLAB上机实验
- LVS-DR+Keepalived 高可用群集
- java xwork_xwork-core-2.3.4源码 - 源码下载|通讯/手机编程|J2ME|源代码 - 源码中国
- sql order by 降序_数仓面试|四个在工作后才知道的SQL密技
- 目前流行的装修风格_当下最流行十种装修风格,总有一款适合你!
- opencv 图片叠加_OpenCVSharp学习之——ROI与图像叠加
- python动态柱状图_python – 在Jupyter中使用plotly以离线模式创建动画图表
- 星系超级计算机,Mira超级计算机“最后的旅程”:阿贡实验室进行了一次超大规模宇宙模拟...