FlutterのフロントをほぼNoCodeで実現できるXd to Flutterが革命的！！
こんにちは。バーチャルエンジニアの源上エイラです。
今回はAdobeXdで作成した画面デザインを、そのままFlutterに使用することができる画期的なプラグイン、Xd to Flutterを紹介します。
私はFlutterのWidgetの位置調整が苦手だったのですが、このプラグインのおかげで自分のアイディアを直感的に、簡単にFlutterの画面に持っていくことができるので
それでは、以下本文です。
Xdの準備
Xdのプラグインを管理からXd to Flutterを検索し、インストールしてください。
Flutterの準備
Flutterプロジェクトを作成したら、以下のパッケージをインストールしてください。
dependencies:
flutter:
sdk: flutter
adobe_xd: ^2.0.0+1Xdで作成するデザインに画像を使用する場合は、assetsの設定もしておきましょう。
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/XdからFlutterのコードを生成する
それでは、Xd to Flutterを使用していきましょう。
今回は、以下のようなログイン画面をデザインしてみました。
Flutterプロジェクトへ出力するために、ディレクトリ等の設定を行います。
設定を終えたら、Export All Widgetsボタンをクリックすると・・・
dartファイルが丸ごとジェネレートされました！
あとはmain.dartのhome属性でクラスのコンストラクタを呼び出せば・・
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: SignIn(),
);
}
}
簡単すぎる・・！
もう各コンポーネントの位置調整に頭を悩ませる必要もないです。
ただ、実際に動くボタン等ではなく、BoxDecorationというコンポーネントになってしまっているなど、完全にそのまま使える状態ではないです。
しかし、位置調整やレイアウトが決まってさえいればこっちのものなので、自分で使いたいWedgetに置き換えるだけですね。
特にFlutterのUI/UXデザイン初心者の方には本当におすすめです。
それではまた。