XD to Flutterを使ってみる
本日はAdobeのCC道場を見て気になったので、XD to Flutter
xd.adobelanding.com
を使ってみました。
なんとAdobe XDからFlutterコードをエクスポートすることができるらしいです。
本日はプラグインのインストールと設定、使ってみた感じとこれからの勉強課題について書こうと思います。
使用方法
1. Flutter側の設定とXD側の設定
1-1. プロジェクトを作る
プロジェクトを作りたいディレクトリに行って
flutter create <project名>
完了したら
flutter run
で確認。
そうするといつものカウンターでもアプリができています。
2. XD to Flutterの使いかた
2-1. UI Panelの使いかた
XD -> プラグイン -> UI Panelを選択して画面の左側にパネルを出す
2-2. Flutterプロジェクトと連携
左のパネルのFLUTTER PROJECTで 1. で作ったプロジェクトを選択する
2-3. アートボードや要素を追加する
XD側でアートボードに名前をつけたり増やしたり、文字や図形を置いてみます。
このときボタンをイメージしてインタラクションも設定しました。
3. アプリの動作とコードのチェック
3-1. ファイルの生成
page1とpage2という名前でアートボードを作ったのでそのファイルが生成されているようです。
3-2. ホーム画面について
カウンターデモのままです。main.dartをみるとhomeはデフォルトのままで、page1クラスを呼び出すようになっていませんでした。何か設定が必要なのでしょうか。要確認です。
3-3. page1画面について
ホーム画面に特定のページを設定してエクスポートする方法がわからなかったので、手動で設定してスクリーンを見てみると、XDでデザインした通りの見た目になっていました!
しかし遷移ボタンのつもりで設定した長方形を押しても何も起こりません。
エクスポートしたコードを見てみると
PageLinkというクラス名がついています。
pub.dev
ここも確認したいと思います。
使用してみた感想
良かったところ
1. 初期設定が簡単(XD側のインストールとFlutter側のpackageのインストールのみで再起動等は必要なし)
2. デザインした見た目をそのままアプリで確認できる
わからなかったところ
1. ホームスクリーンの設定方法
2. ボタンをボタンと認識させる方法(RaisedButtonクラス等で書き出す方法や、押した時のアクションを設定する方法)
3. ヘッダー、フッターを設置する方法