flutter项目中添加web支持

Flutter 2.5.1

10年积累的网站设计制作、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有松岭免费网站建设让你可以放心的选择与我们合作。

在项目目录下，在终端运行以下命令：

Flutter 中文文档 - Flutter 中文资源 | 在 Web 中展示图片

在无法修改服务器配置的情况下可以使用html渲染。此外官方文档中建议，如果显示的图片较多，使用html渲染性能更好

webview只支持移动端，其它平台尝试打开网页

webview - web view for flutter web application - Stack Overflow

使用 package_info_plus | Flutter Package (pub.dev) 替换package_info

使用 --base-href ，可设置服务器子目录

flutter项目升级2.0过程填坑记录

在此之前先推荐看大佬的: 填坑指导

iOS需要注意：

1、flutter2.0要求cocoapods 升级到1.9.0

详情看这篇博客

2、原来flutter项目中的podfile文件是旧版本的ccocoapods了，删除podfile和对应的.lock，然后flutter项目重新运行使用它自动生成的podfile文件

3、安装CocoaPods

卸载cocoapods：sudo gem uninstall cocoapods

查看cocoapods版本：pod --version

指定版本安装：

sudo gem install -n /usr/local/bin cocoapods -v 1.9.3（新MacOS系统升级）

不指定版本安装

sudo gem install -n /usr/local/bin cocoapods

说明 :老项目sdk1.17.0===升级到2.0.1,当前所有操作基于win平台

到此为止环境已经准备妥当，正式进入项目修改。

所有的插件都要适配到空安全，插件是否支持均会有对应说明Null safety,适配过程不确定版本的话，可以使用dio: any,适配完事后再在pubspec.lock文件中查看具体的版本修改过来,实在有部分插件没有支持的，参考下面

部分插件在适配空安全的版本放弃维护了，得自行更新或寻找替代，如： flutter_swiper 变为 flutter_swiper_null_safety ，插件更新后要注意项目中的用法是否需要更新

2.1.1: 以前采用的是 provide 插件共享全局数据,现在变化为 provider ，用法改变, 点击参考 ，以防文章丢失，我重复一遍：

比如:

2.1.2: dio版本升级到4.0.0最新版后，部分用法改变

2.2.1

2.2.2

解决方案:

2.2.3

解决方案:

2.2.4

解决方案:

2.2.5

解决方案:

2.2.6

解决方案:

2.2.7

解决方案:

2.2.8

解决方案: child 换为sliver

2.2.8.1

解决方案: 项目目录下: android--app-build.gradle --minSdkVersion改为:18 或者19

2.2.8.2

解决方案: 在pubspec.yarm管理里面添加:publish_to

2.2.8.3

解决方案: video_player升级后字段发生了变化，initialized字段更换为:isInitialized(_controller.value.isInitialized)

2.2.8.4

解决方案:

2.2.8.5

解决方案:

2.2.8.6

解决方案: 方案一:删除ios目录下的Podfile.lock 文件然后重新运行 pod install命令

方案二:删除ios目录下的Podfile.lock与Podfile文件 重新运行flutter run或flutter build ios

方案三:删除ios目录,重新运行 flutter create . 命令，注意有"."这个符号不要忘记

2.2.8.7

这个报错一般对应的就是下面的报错，注意看后面的报错信息，看是哪个插件报错。

解决方案: 把Podfile的版本注释打开，改为platform :ios, '9.0' 或者是更高的版本

全局替换

1.将new List() 替换为[];

2.TextField的inputFormatters:[WhitelistingTextInputFormatter.digitsOnly] 替换为[FilteringTextInputFormatter.digitsOnly]

3.TextField的inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-z|A-Z|0-9]"))]替换为FilteringTextInputFormatter.allow(RegExp("[a-z|A-Z|0-9]"))

4.Stack组件中overflow: Overflow.visible改为 clipBehavior: Clip.none；overflow: Overflow.clip改为clipBehavior:Clip.hardEdge

5.ListWheelScrollView组件中clipToSize = false改为clipBehavior: Clip.none,clipToSize = true改为 Clip.hardEdge

6.TextField中maxLengthEnforced: true改为maxLengthEnforcement:MaxLengthEnforcement.enforced

7.FlatButton、RaisedButton、OutlineButton的变化： 官方参考

颜色的属性发生了变化，由原来的Color 变为了MaterialStatePropertyColor, 这是未了解决不同状态(pressed、hovered、focused、disabled)下按钮颜色的变化

例如

8.出现如下警告

9.showSnackBar报错误

解决方案: Scaffold换为ScaffoldMessenger

10.textSelectionColor弃用

解决方案:

11.charts_flutter升级后属性报错

解决方案:

12.flutter 真机调试无法访问网络，dio报错

解决方案:

android:

ios:

问题12完整参考

Flutter上线项目实战——Vap视频动画

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架，最终我们选中 腾讯vap ，它支持了Android、IOS、Web，为我们封装flutter_vap提供了天然的便利，并且它提供了将帧图片生成带alpha通道视频的工具，这简直太赞了。

VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案。

video for youtube

video for qiniu

apk download

github

Flutter 项目升级报错处理

1、flutter Warning: Podfile is out of date

Warning: Podfile is out of date This can cause a mismatched version of Flutter to be embedded in your app, which may result in App Store submission rejection or crashes. If you have local Podfile edits you would like to keep, see for instructions. To regenerate the Podfile, run: rm iOS/Podfile

2、Automatically assigning platform iOS with version 8.0 on target Runner 或者Automatically assigning platform iOS with version 12.0 on target Runner because no platform was specified. Please specify a platform for this target in your Podfile

解决：只要修改ios目录下podfile 第二行 去掉#号

原因是：没有指定iOS版本。

3、 'AMapFoundation' uses the unencrypted 'http' protocol to transfer the Pod. Please be sure you're in a safe network with only trusted hosts. Otherwise, please reach out to the library author to notify them of this security issue.

类似的问题

解决方法：

登录 寻找相关最新版本更新一下。

4、[!] An error occurred while processing the post-install hook of the Podfile.

undefined method `each_child' for #Dir:0x00007f8415636e38

Did you mean? each_slice

解决办法：升级ruby

4. VS Code创建flutter项目

如果和我一样，用惯了VS Code来开发项目的话，那就跟我一起来配置一下如何在VS Code里运行flutter项目。

1.在VS Code里安装扩展：

2.在VScode上打开打开终端，快捷键：Ctrl+~（Tab上一个键），在终端上输入：flutter create flutter_app02，即可创建完成！

也可以把之前的项目放到工作区

3.在终端中运行命令：flutter run

运行的时候你会发现手机提示你安装个app，点击安装完成，项目就在手机上显示了，下图是运行成功的提示。

下图是手机效果：

如果报错的话，运行下清缓存的命令：flutter clean，把文件夹.gradle删掉，然后flutter run重新跑下项目。

当前名称：flutter项目,flutter项目可以build apk不能run
文章链接：http://sczitong.cn/article/dsgicig.html