Adobe XD一键生成Flutter代码

Adobe XD一键生成Flutter代码

最近在微信的谷歌开发者中得到一篇推文，因为最近也是在自学flutter，看他提到flutter就来兴趣的看了下，突然发现了好多的有意思的项目，还有就是XD支持一键生成Flutter。今天就抱着不太科学的心态去尝试了下，发现还真的是可以，也不知道这个是开发者的福音还是丢饭碗的节奏。于是我从我们家UI那里拿到了一手psd的源文件，其实只要是Adobe工程出来的都可以导入进去的。接下来我们开始搞起来。

1、先下载Adobe XD，并且安装（安装步骤就没啥可以说的）

下载地址https://www.adobe.com/cn/products/xd.html

2、接着下载XDpacks这个是管理xd的插件的软件（部分是收费的）

下载地址：https://xd.94xy.com/xdpacks.html

image.png

3、在XDpacks中搜索XD to Flutter

image.png

因为本人的电脑上已经安装了，所有各位只要点安装就行了，

3、在AS或者是使用命令生成一个Flutter项目

4、进入项目中，找到pubspec.yaml文件，打开，并且添加依赖

dependencies:
  flutter:
    sdk: flutter
    #这个就是xd的依赖，没有依赖导出不了
    adobe_xd: 0.1.3

5、回到XD中的界面来，可以找一些素材或者xd中自己生成。

6、选中XD中的控件或者是按钮，然后选择菜单栏中的插件->XD to Flutter->UI Panel可显示上图中的 UI 面