借Adobe XD之力，自动生成Flutter代码

水深无声 2023-02-15 10:12 7阅读 0赞

从原型设计图到可运行的 Flutter App 源码，覆盖 Android、iOS、Web 等平台。

## 概述 ##

今天，我们来聊聊一个专门为“懒人程序员”准备的工具——Adobe XD。使用它可以快速将原型设计图转换为可执行的 Flutter 代码， 而由于 Flutter 自身跨平台的特性，因此这些自动生成的代码即可以用在 Android、iOS 这样的移动设备上，也可以用在 Web 页中。

## 认识 Adobe XD ##

首先我们来看看 Adobe XD 是什么，以下内容摘自百度百科：

> Adobe XD 是一站式 UX/UI 设计平台，在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是一款结合设计与建立原型功能，并同时提供工业级性能的跨平台设计产品。设计师使用 Adobe XD 可以高效准确的完成静态编译或者框架图到交互原型的转变。

简而言之，这个软件实际上就是一个原型图设计工具。而又由于其背靠 Adobe 这座大山，因此它还可以与 PhotoShop、Sketch、Illustrator……等工具兼容使用，非常方便。再加上今天我们介绍的重磅功能——自动生成源代码，这或许就是其在 Axure、Sketch 等软件广泛使用的今天依然能够存活的原因之一。此外，它本身还是免费的，只要登录 Adobe Creative Cloud 账户即可免费安装并使用它。  
Adobe XD 软件本身可以运行在 MacOS 以及 Windows 平台上，顺便说一句：本篇文章的内容我也以免费视频课的形式发布在 B 站上，喜欢看视频的小伙伴不妨[点击链接][Link 1]跳转到 B 站。  
下面我们来看看 Adobe XD 的系统配置要求（摘自 Adobe XD 官方网站）：![在这里插入图片描述][20200526080237601.png]![在这里插入图片描述][20200526080305924.png]Adobe XD 还支持在移动设备上运行，其配置要求不再详述，感兴趣的朋友可以到其[官方网站][Link 2]上了解详情。

## 安装 Adobe XD，配置 Flutter 开发环境 ##

这两个步骤的详细过程，不是本文讨论的重点，这里不再赘述。我们的目标是这两个要在电脑中正常运作，其判断依据如下：

### 运行正常的 Adobe XD： ###

在开始菜单中点击 Adobe XD，首次运行可能会出现登录界面。按照提示登录，成功后出现如下图所示的界面，即表示其运行正常：  
![在这里插入图片描述][20200529143722494.png]接着，使用 XDPacks 安装和管理插件。下载地址：[https://xd.94xy.com/xdpacks.html][https_xd.94xy.com_xdpacks.html]。安装后启动 XDPacks，按照提示登录，安装 XD to Flutter 插件。![在这里插入图片描述][20200529144209131.png]

### 配置正确的 Flutter 开发环境： ###

启动命令行，输入  
flutter doctor  
出现如下图类似的结果，即表示配置准确无误。![在这里插入图片描述][20200529144235698.png]注意，虽然我们这里有感叹号的警告信息，也有红叉，但仔细看过后可以得知，这些都是无关紧要的。

## 开始绘制原型 ##

下面我们就可以开始用 XD 绘制原型图了，笔者这里画一些极其简单且没有实际意义的图形，目的仅作演示之用：  
![在这里插入图片描述][20200529144613986.png]

## 创建 Flutter 项目，自动生成 UI 源码 ##

下面我们创建一个新的 Flutter 工程，命令为：

flutter create xxxx

其中，“xxxx”为项目名，在本例中为 xd*to*flutter，因此，完整的命令为：

flutter create xd_to_flutter

稍等片刻，即可出现创建成功的结果。  
使用 Android Studio 或 VS Code 打开项目中的 pubspec.xml，添加 adobe\_xd 插件。

dependencies:    adobe_xd: ^0.1.4

下面，打开刚才使用过的 XD 软件，配置项目路径，并输出代码。  
![在这里插入图片描述][20200529145851493.png]如上图所示，分别配置项目目录、组件命名前缀以及输出内容。最后，点击最下方的"Export All Widgets"，即可生成源码。

## 使用生成的源码运行 App ##

回到 Android Studio 或 VS Code，可以看到已经生成的 dart 源码文件，我们在 main()方法中使用它。  
![在这里插入图片描述][20200529150610597.png]启动模拟器或连接真机，运行后的效果如下图所示：  
![在这里插入图片描述][20200529150835158.png]可以看到，运行结果与原型设计图保持高度一致。

阅读全文: [http://gitbook.cn/gitchat/activity/5ed8af7407cba35c0369cda8][http_gitbook.cn_gitchat_activity_5ed8af7407cba35c0369cda8]

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。

![FtooAtPSkEJwnW-9xkCLqSTRpBKX][]

[Link 1]: https://www.bilibili.com/video/BV1YV411C7St/
[20200526080237601.png]: https://img-blog.csdnimg.cn/20200526080237601.png
[20200526080305924.png]: https://img-blog.csdnimg.cn/20200526080305924.png
[Link 2]: https://helpx.adobe.com/cn/xd/system-requirements.html
[20200529143722494.png]: https://img-blog.csdnimg.cn/20200529143722494.png
[https_xd.94xy.com_xdpacks.html]: https://xd.94xy.com/xdpacks.html
[20200529144209131.png]: https://img-blog.csdnimg.cn/20200529144209131.png
[20200529144235698.png]: https://img-blog.csdnimg.cn/20200529144235698.png
[20200529144613986.png]: https://img-blog.csdnimg.cn/20200529144613986.png
[20200529145851493.png]: https://img-blog.csdnimg.cn/20200529145851493.png
[20200529150610597.png]: https://img-blog.csdnimg.cn/20200529150610597.png
[20200529150835158.png]: https://img-blog.csdnimg.cn/20200529150835158.png
[http_gitbook.cn_gitchat_activity_5ed8af7407cba35c0369cda8]: http://gitbook.cn/gitchat/activity/5ed8af7407cba35c0369cda8?utm_source=csdn_blog
[FtooAtPSkEJwnW-9xkCLqSTRpBKX]: https://images.gitbook.cn/FtooAtPSkEJwnW-9xkCLqSTRpBKX