Adobe XDとFlutterを組み合わせてUIをつくってみた

この記事は、「Flutter #1 Advent Calendar 2020」の3日目の記事です。

Adobe XDとFlutterを組み合わせてUIをつくってみました

事前準備

• Flutterの環境準備

  • Flutterインストール

• 各バージョン

  • Flutter v1.20.4
  • Dart v2.9.2
  • Xcode v12.0
  • Android SDK v30.0.1
  • Android Studio v4.0
  • Visual Studio Code v1.51.1
  • Flutter extension v3.16.0

Flutterの環境確認

flutter doctor -v

はじめに、Flutterのプロジェクトを新規作成します。

flutter create ui_app

今回は「lib/main.dart」を修正します。

全体構成

Visual Studio Codeで「実行とデバッグ」を実行し、一度動作確認をします。

実行するとデフォルトのアプリケーションが表示されます。ここまで表示されるとプロジェクトの新規作成はOKです

プロジェクト作成後、XDの設定をしていきます。

• XD to Flutteパッケージのインストール

XD to Flutterプラグインのインストール

adobe_xdをインストールします。

pubspec.yaml

name: ui_app
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
    sdk: '>=2.7.0 <3.0.0'

dependencies:
    flutter:
        sdk: flutter

    cupertino_icons: ^0.1.3

    # XD to Flutterパッケージ追加
    adobe_xd: ^1.0.0+1

dev_dependencies:
    flutter_test:
        sdk: flutter

flutter:
    uses-material-design: true

パッケージのインストールは、Visual Studio Codeで拡張機能をいれると自動インストールされますが、下記コマンドで手動インストールも可能です。

flutter pub get

パッケージのインストールをしたので次に、XDの設定をしていきます。

XDを開いてXD to Flutterプラグインをインストールします。
「プラグイン → プラグインを見つける」

プラグインがインストールされたらUI Panelを開きます。

プロジェクトパスとコード出力先ディレクトリを設定します。
設定が完了したら、UIを作成していきます。
今回は、こちらからUIキットを利用してUIサンプルを作成してみました。UI作成までできたら、エクスポートします。

エクスポート後、XDのUIをDartに変換したファイルが出力されているのが確認できます。

最後に、メインコードと変換したXDのコードを連携します。

/lib

main.dart

import 'package:flutter/material.dart';
// UIファイル読み込み
import 'XDxd_to_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'XD to Flutter example',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // UI読み込み
      home: XDxd_to_flutter(),
    );
  }
}

UIファイルを読み込みます。

// UIファイル読み込み
import 'XDxd_to_flutter.dart';

UIを読み込みます。

// UI読み込み
home: XDxd_to_flutter(),

再度、Visual Studio Codeで「実行とデバッグ」を実行し、動作確認をします。

実行するとXDで作成したUIがアプリケーションに反映表示されます。

エクスポート時に対象のDartファイルが更新されるので、連携しながら更新することも可能です。

Adobe XDとFlutterを組み合わせてUIをつくることができました

FlutterでのUI構築は一部クセがあったりするのですが、XDで作成したUIがある程度そのまま利用できるのはすごく便利だなと思いました
ただ、まだ連携できていない機能があったり、固定配置のコードになったりもするので、複雑なUIになるとまだ厳しい部分もありそうです...
UIをある程度自作できるかたは、XDで作成したUIをエクスポートしてそのコードの一部をうまく利用するかたちだと開発しやすいかもしれません

Flutterについて、他にも記事を書いています。よろしければぜひ
FlutterのWebViewでマップアプリケーションを表示してみた

やってみたシリーズ
tags - Try