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 面板

image.png

或者选择Export All Widgets

7、要导出单个元素，只需选择您想导出至 Flutter 的单个 widget，然后点击 UI 面板中的 复制所选项 (Copy Selected) 按钮。这会将元素对应的 Dart 代码复制到您的剪贴板中，您可以基于这些代码打造有状态或无状态的 widget。

这个就是我按钮导出的代码：

// Adobe XD layer: '马上出借 拷贝' (group)
    Stack(
    children: <Widget>[
      // Adobe XD layer: '组 25' (group)
      Stack(
        children: <Widget>[
          Transform.translate(
            offset: Offset(105.0, 2204.0),
            child:
                // Adobe XD layer: '圆角矩形 5 拷贝' (shape)
                Container(
              width: 543.0,
              height: 94.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(47.0),
                gradient: LinearGradient(
                  begin: Alignment(0.0, -1.0),
                  end: Alignment(0.0, 1.0),
                  colors: [const Color(0xffffe68a), const Color(0xfff5b048)],
                  stops: [0.0, 1.0],
                ),
              ),
            ),
          ),
        ],
      ),
      Transform.translate(
        offset: Offset(282.38, 1466.19),
        child: SizedBox(
          width: 192.0,
          child: Text(
            '领取返现',
            style: TextStyle(
              fontFamily: 'PingFangSC-Semibold',
              fontSize: 39.999961853027344,
              color: const Color(0xffb35c22),
              height: 23.916648785256182,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    ],
  );

代码看起来还不错，。有点多，区区一个按钮，代码量有点惊人的感觉，还好缩进帮我们处理好了。否则又可能烂尾了，其实感觉还不错，当然这个只能是我们而且偷懒用用，这里的额逻辑和交互都是要我们程序员自己去处理的，所以功能有限，不过也挺好的，有一切简单的固定页面一键生成美滋滋，比如listView的item，我们可以用这个来生成，然后改成动态获取和显示，省事很多。
到这里就结束了，有不对的地方欢迎大佬指正。