13518219792
Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。
我们提供的服务有：网站制作、成都做网站、微信公众号开发、网站优化、网站认证、福清ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的福清网站制作公司
话不多说，先来看看实际效果。 项目源码地址
开发环境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。
数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。
本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。
要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。
接下来使用 flutter create 命令创建我们的模版工程。
创建完项目后，我们就可以 run 起来了。
先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。
我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。
通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置
这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。
读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。
使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。
Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。
在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。
通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。
原文地址：
注：亮度调节和音量调节gif无法体现，功能是ok的，其次默认Icon锁的close和open实在难以分辨。
环境：Flutter 2.8.1 channel stable ;Dart 2.15.1
需要音频播放器的看这里： Flutter音乐播放器
重点说下这个工具类，因为视频播放，涉及到状态改变有很多，笔者刚开始选择使用 InheritedWidget 来在众多的widget之间共享数据。但是总感觉这样有点繁琐，且不很优雅！
这里非广告，如果是使用 GetX 就很简单了，笔者也使用了 GetX 进行封装了，一泻千里的赶脚！，但是笔者还是那句话：刚开始接触Flutter的开发者不是很建议使用 GetX ，可以先熟悉下Flutter状态管理的基础原理再行使用。而且为了尽量简洁，还是不引入其他的第三方了。
我们选择对第三方插件进行封装的目的不外乎这几个：
于是笔者就写了一个工具类 VideoPlayerUtils ，专门且只用来处理播放器的所有业务。包括暂停、播放、跳转、调节音量、调节亮度、切换视频等操作。在所有的widget中不会引用关于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 负责widget与播放器之间的所有操作交互。后续优化迭代或更换播放器插件时，只需针对这个工具类进行修改，对所有widget不会有任何的影响，大大的解耦合了。
其中 VideoPlayerState ：
提供以上的公共属性，可以通过 VideoPlayerUtils 来获取对应的值，使用 get 只读，使外界不会误修改这些属性，以保证数值的安全性。开发者可根据自身需要自行添加属性。
提供以上方法来处理播放器的所有业务。同样的开发者可根据自身需要自行添加或修改。
重点说下这个方法，是整个业务的核心方法，控制视频的播放或暂停。开发者只要遇到播放或暂停是均可调用此方法，具体是播放或暂停，内部根据传入的 url 自行判断，开发者不需要关心。
切换新视频也是使用此方法，传入的 url 与上次不一致，自动切换新视频。笔者可根据 statusListener 来监听播放状态的改变，以此处理自身逻辑。
这个也需要提下，视频播放器在播放新视频时会异步初始化，一般我们的操作是在 initState() 初始化，成功后再 setState() 。这里笔者遇到一个让人蛋疼的问题：
我们看 video_player 的使用：
VideoPlayer(controller) ：widget中已经持有了controller。本来笔者封装的目的就是为了让widget与controller的之间解耦合。但此时的笔者。。。。
放弃不是不可能放弃的，这辈子都不会放弃的！
于是笔者取了巧，写了一个初始化监听器 initializedListener ，包换2个参数： bool,Widget ，初始化是否成功；其中widget为初始化成功返回需要展示的播放器UI，失败默认返回 const SizedBox() 。
到这里就可以简单使用了：
没看错，视频播放就是这么简单。
如果有更多的业务功能，笔者也按照自己的需求写了一套，同样的开发者可根据自身需要自行添加或修改。
VideoPlayerGestures 主要是处理手势的，比如快进、快退等跳转播放；左侧上下滑动调节亮度；右侧上下滑动调节音量；单击是否开启沉浸式播放，所有widget的隐藏与显示；双击播放、暂停等。
哦，还有 PercentageWidget 也放到这个文件下了，就是这玩意：
因为显示的百分比与手势相关，随着手势移动而更新。开发者可自行处理。
笔者处出于简单考虑，就按照整个UI的位置命名了。瞅一眼就知道是啥玩意。
同样的开发者可根据自身需要自行添加或修改。
就是这玩意：
同样的开发者可根据自身需要自行添加或修改。话说这个锁的 Icon 的open和close是真的难分辨！
就是这玩意：
同样的开发者可根据自身需要自行添加或修改。
这玩意是自定义的，别问，问就是跟产品干一架落了下风
主要就是自定义这玩意：
同样的开发者可根据自身需要自定义。
注：这里没有添加缓冲的进度，开发可查看 video_player 中的源码 VideoProgressIndicator ，按业务自行定义。
这玩意就是整合以上的widget，再考虑下全屏的安全区域，没啥东西。开发者可自行处理！
具体的实现监听器的思路， 看这里 。
自此一个漂亮的Flutter视频播放器就已经结束了。如果您觉得对您有些许帮助的话，欢迎 Star ！
1、进入设置，找到更多设置，然后设置权限，禁用第三方优化软件，情景模式、省电软件等，这些可能使声音禁止使用。
2、重刷固件，并且清除数据。就可解决flutter播放网易mp3没声音的问题。
flutter开发中，图片的引用是必不可少的，所以为了提高效率和精准度，我们需要对不同分辨率的手机使用相对应的切图图片，本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。
flutter中会首先根据系统的devicePixelRatio（每一个逻辑像素包含多少个原始像素，可以通过MediaQueryData.devicePixelRatio来得到）来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。
所以在flutter项目中，我们需要构建对应的倍数像素文件夹
之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，会自动适配该像素下最接近的jay图片）。
使用flutter-img-sync插件批量化处理，具体操作如下
目前还不能处理gif、webp等格式的图片，而且如果和上边介绍的不同像素比适配方案一起使用的话，由于进行了精准定位，所以指定图片后就不能进行像素适配，这是目前还存在的较大问题，所以目前两者方案只能暂时取一使用。
最近项目中要集成flutter来进行混编，但是在集成后，突然遇到一个很神奇的问题，在debug模式下，用数据线连接真机打包可以打开flutter页面，但是一旦拔掉数据线，再打开flutter页面就不行了，开始以为是因为flutterSDK的原因，但是一查资料才发现，原来是因为debug模式下flutter实现了热重载，默认的编译方式是JIV,但是iOS14+之后的系统限制了JIV这种编译方式，所以连接Xcode重新run一个release包就可以了，因为flutter在release模式下的编译方式是AOT，iOS14+的系统是支持这种编译方式的，具体解决方案如下图
再运行就可以了。
当然还有另外一种解决方案，就是修改flutter的编译配置，强制设为release
（*注：以下仅个人配置过程参考，系统win7-64）
所需软件
vsCode，Android Studio， MuMu模拟器 （直连手机调试的话就不需要了）
配置过程
1、Flutter安装
安装时忘记截图，具体可参考链接 flutter中文网 相关教程+ 百度 ，现在网上教程很多，多踩点坑总会成功的。
2、MuMu模拟器调试时需进行相关配置
（*注：直连手机调试可忽略以下；执行以下操作需要在执行flutter doctor成功后，flutter run执行前）
（1）mumu模拟器端口监听，需要执行
（2）mumu模拟器调试flutter run可能会报错，可以改成，具体原因可直接百度“--enable-software-rendering”
3、如需调试ios端可尝试虚拟机+macOS+xCode
vmware+macOs可参考链接 VMware15安装MacOS系统 ，笔者按照该步骤已安装成功
