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

![try-047_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1895b837-5db4-0820-fdaa-09973e71a33e.gif)

<br>

![flutter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/c9fb2b5a-b10c-302a-0411-1618b9ff5095.png)

<br>

この記事は、「[Flutter #1 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/flutter)」の3日目の記事です。

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

<br>

事前準備

- Flutterの環境準備
  - [Flutterインストール](https://flutter.dev/docs/get-started/install)

- 各バージョン
  - 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

<br>

Flutterの環境確認

```bash
flutter doctor -v
```

![try-047_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1d208414-fb77-68f6-cf0b-b4951627735e.png)

<br>

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

```bash
flutter create ui_app
```

![try-047_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/d40d757e-4180-3ca0-86c5-d61df465d805.png)

<br>

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

全体構成
![try-047_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ed54e413-d925-bd06-3806-c9f45694317b.png)

<br>

Visual Studio Codeで「実行とデバッグ」を実行し、一度動作確認をします。
![try-047_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/676ef4da-8471-6cd6-f26a-ff4c9ce1917e.png)

<br>

実行するとデフォルトのアプリケーションが表示されます。ここまで表示されるとプロジェクトの新規作成はOKです :thumbsup: 
![try-047_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ce8e4cde-f4ec-9be4-15c5-aa4c34dd2329.png)

<br>

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

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

<br>

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

[adobe_xd](https://pub.dev/packages/adobe_xd)をインストールします。

#### pubspec.yaml

```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
```

<br>

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

```bash
flutter pub get
```

![try-047_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/37bbaf9d-9065-0a56-9e68-924ec9e58031.png)

<br>

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

XDを開いてXD to Flutterプラグインをインストールします。
「プラグイン → プラグインを見つける」
![try-047_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/549b21a5-4368-3f7c-c780-7b1983df56be.png)

![try-047_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1718bee2-e59f-5624-2eb7-38438ddba97d.png)

![try-047_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/3210e613-c34f-b927-b282-663cfbc7dba6.png)


プラグインがインストールされたらUI Panelを開きます。
![try-047_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/741d4ff7-894a-9fbb-bd2f-8f72f9e89187.png)

プロジェクトパスとコード出力先ディレクトリを設定します。
設定が完了したら、UIを作成していきます。
今回は、こちらから[UIキット](https://www.adobe.com/jp/products/xd/resources.html#panel-3)を利用してUIサンプルを作成してみました。UI作成までできたら、エクスポートします。
![try-047_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/7647cc9b-b132-3954-55f9-a123bb2c08de.png)

<br>

エクスポート後、XDのUIをDartに変換したファイルが出力されているのが確認できます。
![try-047_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/34767f2e-f139-f791-7d1e-e14ae6ae29f8.png)

<br>

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

/lib
#### main.dart

```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(),
    );
  }
}
```

<br>

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

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

<br>

UIを読み込みます。

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

<br>

再度、Visual Studio Codeで「実行とデバッグ」を実行し、動作確認をします。
![try-047_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/676ef4da-8471-6cd6-f26a-ff4c9ce1917e.png)

<br>

実行するとXDで作成したUIがアプリケーションに反映表示されます。
![try-047_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/449f23b9-acb6-2d7e-9db3-959beb240149.png)

<br>

エクスポート時に対象のDartファイルが更新されるので、連携しながら更新することも可能です。
![try-047_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/1895b837-5db4-0820-fdaa-09973e71a33e.gif)

<br>

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

<br>

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

<br>
<br>

Flutterについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://qiita.com/dayjournal/items/044ac00459bdbf0f74f2" target="_blank">FlutterのWebViewでマップアプリケーションを表示してみた</a>

やってみたシリーズ :grinning:
<a href="https://memo.dayjournal.dev/tags/try" target="_blank">tags - Try</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://memo.dayjournal.dev/images/etc/book.png" alt="book"></a>