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 플러그인 설치

아도베_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에서 맵 애플리케이션을 보았습니다.

시도한 시리즈
태그 - Try