13518219792
众所周知，小程序是由HTML标签来开发原生组件，那么首先需要将HTML做解析，这里我们将HTML通过node脚本解析成JSON字符串，再用Dart来解析JSON，映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果，后续再详细介绍。
我们提供的服务有：成都网站设计、成都网站制作、外贸网站建设、微信公众号开发、网站优化、网站认证、涉县ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的涉县网站制作公司
为了高效解析，直接用flutter的组件名在HTML文件上开发
直接使用flutter的组件
模仿微信小程序的Api，cc对应是微信小程序的wx
以上HTML中的例子
《使用Flutter + V8/JsCore开发小程序引擎（二）》
《使用Flutter + V8/JsCore开发小程序引擎（三）》
如果我们目前的项目是Android的，但是接下来我们希望部分页面可以使用Flutter进行开发，甚至我们希望在Native页面中嵌入FlutterUI组件，那么我们该如何实现呢？
假设你现在Android项目的目录的结构是这样的
这时候如果你想创建一个Flutter模块，使得Android模块和Flutter模块之间可以进行交互，我们可以通过Android Studio新建一个Flutter Module，具体过程是：File — New — New Module ，之后选择Flutter Module，指定Project Location的路径为
也就是说，最终你的项目结构会是这样的
接下来在Android Module的 build.gradle 文件中添加flutter依赖
先创建一个Flutter页面
这里比较重要的是 window.defaultRouteName 这个字段，这个字段可以接收从Native传递过来的参数 （下文我们会介绍原生传递参数的方法），也就是说通过这个字段我们就可以进行Flutter页面的路由的分发
我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ，这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName
注意：需要在 AndroidManifest.xml 注册 FlutterActivity
自己创建一个 FlutterAppActivity 继承自 FlutterActivity
在 MainActivity 中启动 FlutterAppActivity （另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity ）
两种启动方式的区别
如果单纯只是想打开一个Flutter页面，两种方式实际上基本没有太大区别，第一种方式也许还会更简单一点。但是，在Flutter开发中，我们往往还需要开发一些Native插件供Flutter调用，如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件，所以实际开发中一般推荐使用第二种方式
扩展思考
initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们不仅仅可以传递一个路由名称，有时候我们也可以通过这个参数传递一串JSON数据，然后在Flutter端进行解析，这样我们就可以通过这个参数做更多的事情
activity_main.xml
FrameLayout 用于承载Flutter组件
MainActivity.java
使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中
运行结果
上半部分是原生的TextView，下半部分是Flutter的Text组件
本节主要介绍了Native和Flutter之间的页面跳转，以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互
Dart的 IO 库包含了文件读写的相关类，它属于 Dart 语法标准的一部分，所以通过 Dart IO 库，无论是 Dart VM 下的脚本还是 Flutter，都是通过 Dart IO 库来操作文件的，不过和 Dart VM 相比，Flutter 有一个重要差异是文件系统路径不同，这是因为Dart VM 是运行在 PC 或服务器操作系统下，而 Flutter 是运行在移动操作系统中，他们的文件系统会有一些差异。
Android 和 iOS 的应用存储目录不同， PathProvider 插件提供了一种平台透明的方式来访问设备文件系统上的常用位置。该类当前支持访问两个文件系统位置：
File代表一个整体的文件,他有三个构造函数，分别是：
文件读取本身有两种形式，一种是文本，一种是二进制。
2.2.1 读取文本内容
如果是文本文件，File提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法，读取文本内容
readAsString 一次性读取所有文本
readAsLines 一行行的读取文本
结果返回的是一个List，list中表示文件每行的内容
readAsStringSync、readAsLinesSync同步读取文本
2.2.2 读取二进制内容
如果文件是二进制，那么可以使用readAsBytes或者同步的方法readAsBytesSync:
dart中表示二进制有一个专门的类型叫做Uint8List,他实际上表示的是一个int的List。
上面提到的读取方式，都是一次性读取整个文件，缺点就是如果文件太大的话，可能造成内存空间的压力。
所以File为我们提供了另外一种读取文件的方法，流的形式来读取文件.
示例
dart提供了open和openSync两个方法来进行随机文件读写：
写入和文件读取一样，可以一次性写入或者获得一个写入句柄，然后再写入。
一次性写入的方法有四种，分别对应字符串和二进制
句柄形式可以调用openWrite方法，返回一个IOSink对象，然后通过这个对象进行写入：
默认情况下写入是会覆盖整个文件的，但是可以通过下面的方式来更改写入模式：
虽然dart中所有的异常都是运行时异常，但是和java一样，要想手动处理文件读写中的异常，则可以使用try,catch:
我们还是以计数器为例，实现在应用退出重启后可以恢复点击次数。 这里，我们使用文件来保存数据：
1.引入PathProvider插件；在pubspec.yaml文件中添加如下声明：
执行 flutter pub get
2.实现如下
参考：
1. 建立一个flutter项目的命令
2. 在ios文件夹下，生成pods文件夹
3. Xcode环境签名设置；
把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。
4.运行创建的flutter项目；
选择真机、模拟机，点击运行按钮，或使用命令运行：
下面两步是赠送的：
5.新加一款插件，所涉及的命令；
ios 端所涉及的命令
6. 刚更新的插件和已有的插件有冲突怎么办？
可以试一试以下步骤：
最近在集成flutter进项目
以收集编译产物并以cocopods方式集成
产物大概放入两个pod库
这个暂且叫pod1，pod1放flutter.framework，第三方plugin.a，自己写的基础plugin，比如networking，hud等等（由于是混编，不可避免存在很多原生基础组件，所以能公用的基础组件都会弄一个flutter-plugin桥接）
第二个pod2放编译之后的app.framwork,注册文件GeneratedPluginRegistrant，以及各个业务模块.a（有可能没有）结构大概如下面
podspec大概如下
主工程引入这两个pod库即可
接下来从零开始搭建上文所说的
先创建一个flutter module
这个是主flutter工程，用来集成businessModule以及生成app.framework
结构如下图
再生成一个业务工程
注意此时还需要进入example生成ios和Android工程，不然无法单独编译运行
这样 这个单独的业务模块就可以单独跑起来了
此时主flutter工程和业务工程均搭建完毕
在主工程pubspec.ymal文件讲两个工程关联
好了 接下来就是编写脚本收集产物了
编译完成之后会在flutter主工程product生成如下文件
将上面文件分类收集做成文章开头的pod1，pod2 ，在native工程引入即可
在集成flutter的过程中 踩不少坑 也阅读很多前辈的文章，在此一并感谢
Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。
话不多说，先来看看实际效果。 项目源码地址
开发环境如下：
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。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。
原文地址：
