flutter拖拽生成,flutter拖拽生成页面

Flutter真香，我用它写了个桌面版JSON解析工具

Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。

创新互联公司主要从事成都网站建设、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务温州,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

话不多说，先来看看实际效果。 项目源码地址

开发环境如下：

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。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。

原文地址：

新建一个flutter项目，可以在ios上运行，四步搞定！

1. 建立一个flutter项目的命令

2. 在ios文件夹下，生成pods文件夹

3. Xcode环境签名设置；

把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。

4.运行创建的flutter项目；

选择真机、模拟机，点击运行按钮，或使用命令运行：

下面两步是赠送的：

5.新加一款插件，所涉及的命令；

ios 端所涉及的命令

6. 刚更新的插件和已有的插件有冲突怎么办？

可以试一试以下步骤：

Flutter笔记-调用原生IOS高德地图sdk

2017年底因公司业务组合部门调整，新的团队部分维护的项目用React Native技术混合开发。为适应环境变化，开启疯狂RN学习之旅，晚上回来啃资料看视频。可能由于本身对RN技术体验不感冒或者在环境之下强迫学习有点不爽。开始寻找代替方案，Fluter像一束曙光引起了我的注意，之后一直关注并利用闲余时间开始探索。2018年一直学习到使用Flutter写项目，从0.2.0开始到现在1.5版本的发布，终于开始慢慢的爬出坑位了，但是因为部分控件感觉还是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因项目中严重使用依赖地图，故而做了Fluterr使用原生IOS高德地图调研。因为我本身是一名android开发人员，初学IOS并记录下来。

PlatformView是 flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 view 的小部件。

在我们实际开发中，我们遇到一些 flutter 官方没有提供的插件可以自己创建编写插件来实现部分功能，但是原生View在 flutter 中会遮挡住flutter 中的小部件，比如你想使用高德地图sdk、视频播放器、直播等原生控件，就无法很好的与 flutter 项目结合。

1、info.plist文件设置

2、 ios 端实现原生组件PlatformView提供原生view

3 、ios 端创建PlatformViewFactory用于生成PlatformView

4、 ios 端创建FlutterPlugin用于注册原生组件

5 、flutter 平台嵌入 原生view

iOS端的UiKitView目前还只是preview状态, 默认是不支持的, 需要手动打开开关, 在info.plist文件中新增一行io.flutter.embedded_views_preview为true.

创建类 FlutterMapView 并实现FlutterPlatformView 协议

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

请前往 高德开放平台控制台 申请 iOS Key。

注意：Bundle Identifier需要与申请的时候填写的一致

地图依赖的库列举如下：

基础 SDK AMapFoundationKit.framework

第一步：将解压后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夹中，左侧目录选中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中点击“+”按钮，在弹出的窗口中点击“Add Other”按钮，选择工程目录下的 MAMapKit.framework 文件添加到工程中。

千万不要忘记将AMapFoundationKit也一起加入工程。

3D地图正确配置应如下图所示：

需要引入的资源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle资源文件中存储了定位、默认大头针标注视图等图片，可利用这些资源图片进行开发。

左侧目录中选中工程名，在右键菜单中选择Add Files to “工程名”…，从MAMapKit.framework中选择AMap.bundle文件，并勾选“Copy items if needed”复选框，单击“Add”按钮，将资源文件添加到工程中。

成功跑起来 。。 。