Yukii

主にプログラミング(Flutter)についての記事を書いています。

XD to Flutterを使ってみる

本日はAdobeのCC道場を見て気になったので、XD to Flutter
xd.adobelanding.com
を使ってみました。
なんとAdobe XDからFlutterコードをエクスポートすることができるらしいです。

本日はプラグインのインストールと設定、使ってみた感じとこれからの勉強課題について書こうと思います。

使用方法

1. Flutter側の設定とXD側の設定

1-1. プロジェクトを作る

プロジェクトを作りたいディレクトリに行って

flutter create <project名>

完了したら

flutter run

で確認。
そうするといつものカウンターでもアプリができています。
f:id:muscle_girl:20200522160652p:plain:w200

1-2. adobe_xdパッケージの追加

adobe_xdパッケージを追加するためにpubspec.yamlに追記して

flutter pub get
1-3. XD to Flutterのインストール

XD -> プラグイン -> プラグインを見つける... から XD to Flutterを検索してインストール
f:id:muscle_girl:20200522161624p:plain

2. XD to Flutterの使いかた

2-1. UI Panelの使いかた

XD -> プラグイン -> UI Panelを選択して画面の左側にパネルを出す

2-2. Flutterプロジェクトと連携

左のパネルのFLUTTER PROJECTで 1. で作ったプロジェクトを選択する
f:id:muscle_girl:20200522162526p:plain

2-3. アートボードや要素を追加する

XD側でアートボードに名前をつけたり増やしたり、文字や図形を置いてみます。
このときボタンをイメージしてインタラクションも設定しました。
f:id:muscle_girl:20200522163505p:plain

2-4. Widgetをエクスポートする

2-3. でデザインしたものをコードにしたいので Export All Widgets を押します。このときインタラクションの設定も反映したいのでSETTINGで Prototype Interactions のチェックを入れてみました。

3. アプリの動作とコードのチェック

3-1. ファイルの生成

f:id:muscle_girl:20200522164518p:plain:w300
page1とpage2という名前でアートボードを作ったのでそのファイルが生成されているようです。

3-2. ホーム画面について

カウンターデモのままです。main.dartをみるとhomeはデフォルトのままで、page1クラスを呼び出すようになっていませんでした。何か設定が必要なのでしょうか。要確認です。

3-3. page1画面について

ホーム画面に特定のページを設定してエクスポートする方法がわからなかったので、手動で設定してスクリーンを見てみると、XDでデザインした通りの見た目になっていました!
f:id:muscle_girl:20200522165107p:plain:w200
しかし遷移ボタンのつもりで設定した長方形を押しても何も起こりません。
エクスポートしたコードを見てみると
f:id:muscle_girl:20200522165620p:plain:w200
PageLinkというクラス名がついています。
pub.dev
ここも確認したいと思います。

使用してみた感想

良かったところ

1. 初期設定が簡単(XD側のインストールとFlutter側のpackageのインストールのみで再起動等は必要なし)
2. デザインした見た目をそのままアプリで確認できる

わからなかったところ

1. ホームスクリーンの設定方法
2. ボタンをボタンと認識させる方法(RaisedButtonクラス等で書き出す方法や、押した時のアクションを設定する方法)
3. ヘッダー、フッターを設置する方法