概要
Adobe XDがFlutterをサポートしたみたいなので触ってみました。
Announcing Adobe XD support for Flutter
Create in XD and export to working Flutter code
medium.com
導入方法を紹介しようと思います。
すごい簡単でした！
Adobe XDでFlutterプラグインの追加
プラグイン > プラグインを見つける…を選択
「Flutter」と検索
「XD to Flutter Plugin」のインストール
UI Panelの表示
XDの再起動は必要ありません。
Flutterでプラグインの追加
adobe_xdをインストールします。
以上で設定は終わりです。
単一のエレメントを吐き出す場合
吐き出したいオブジェクトを選択します。
そうすると、UI Panelが以下の様な状態になるはずです。
Copy Selectedを選択
そうする事で、クリップボード上にContainerなどがコピーされている状態になるので対象のファイルにペーストして使用します。
Container(
width: 320.0,
height: 89.0,
decoration: BoxDecoration(
color: const Color(0xff73eadc),
border: Border.all(width: 1.0, color: const Color(0xffedc69e)),
),
);
ちゃんとconstなどにも対応していて良い感じです。
アートボードを吐き出す場合
全てを吐き出したい場合は、全てのオブジェクトが選択されていない状態にします。
すると、UI Panelは以下の様になっているはずです。
以下を設定します。
FLUTTER PROJECT
プロジェクトのルートパスを設定します。libフォルダがあるフォルダですね。
CODE PATH
lib以外の名前にしている場合等に必要だと思います。
IMAGE PATH
画像を保存しているパスを設定します。
WIDGET_NAME_PREFIX
吐き出されるdartファイルのプレフィックスです。
例えば、 FLUTTER PROJECTを設定している状態でExport All Widgetsを選択すると、
設定したプロジェクトのlibフォルダ内にファイルが吐き出されているはずです。
最後に
こちらの機能を利用すれば、UIにかける時間をかなり短縮でき、ロジック部分に時間をかける事ができそうですね。誰かのお役に立てば。
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント