Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What is going on with this article?
@dayjournal

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

try-047_01.gif


flutter.png


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

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


事前準備

  • 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

try-047_02.png


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

flutter create ui_app

try-047_03.png


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

全体構成
try-047_04.png


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


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


プロジェクト作成後、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

try-047_07.png


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

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

try-047_09.png

try-047_10.png

プラグインがインストールされたらUI Panelを開きます。
try-047_11.png

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


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


最後に、メインコードと変換した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で「実行とデバッグ」を実行し、動作確認をします。
try-047_05.png


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


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


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


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




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

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




book

13
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
13
Help us understand the problem. What is going on with this article?