最近在微信的谷歌开发者中得到一篇推文,因为最近也是在自学flutter,看他提到flutter就来兴趣的看了下,突然发现了好多的有意思的项目,还有就是XD支持一键生成Flutter。今天就抱着不太科学的心态去尝试了下,发现还真的是可以,也不知道这个是开发者的福音还是丢饭碗的节奏。于是我从我们家UI那里拿到了一手psd的源文件,其实只要是Adobe工程出来的都可以导入进去的。接下来我们开始搞起来。
1、先下载Adobe XD,并且安装(安装步骤就没啥可以说的)
2、接着下载XDpacks这个是管理xd的插件的软件(部分是收费的)
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 面板