이 기사는 전부 나 Advent Calendar 2018의 10 일째 기사입니다.

하고 싶은 일

Flutter Live 2018에서 발표된 2dimensions사의 Flare를 사용해, 다음과 같은 애니메이션을 Flutter상에서 동작시킵니다.

Flare에서 원하는 flr 파일 다운로드

2차원 사이트에 계정을 만들고 로그인한 다음 Explorer에서 Flare 파일을 찾습니다. (Read Only는 다운로드할 수 없습니다.)
이번에는 sushi을 사용하기로 결정했습니다.

화면 오른쪽 상단의 공유 아이콘을 누르고 내보내기를 선택하여 아래 그림과 같이 Flutter의 binary를 EXPORT합니다.


이제 로컬로 Sushi.flr가 다운로드되었습니다.

pubspeck.yaml 편집 및 assets 디렉토리 만들기

pubspeck.yaml을 다음과 같이 편집합니다.
- dependencies: 에 flare_flutter: 기재
- flutter: 에 assets: - assets/ 기재

pubspeck.yaml 전체는 다음과 같습니다.

pubspeck.yaml

name: flare_sample
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:
  flare_flutter:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
   - assets/

assets 디렉토리를 작성해, 거기에 앞서 Export한 Sushi.flr 를 배치하면 준비 완료입니다.

main.dart 설명

main.dart 를 아래와 같이 기재합니다.

main.dart

import "package:flare_flutter/flare_actor.dart";
import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flare Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Flare-Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // FlareのAnimation名を記載
  String _animationName = "Sushi Bounce";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(title: Text(widget.title)),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                  child: FlareActor(
                    "assets/Sushi.flr",
                    alignment: Alignment.center,
                    fit: BoxFit.contain,
                    animation: _animationName,
                  ))
            ],
          ),
        ));
  }
}

또한, String _animationName = "Sushi Bounce"; 로 정의하는 _animationName 에는 Flare 파일의 좌하에 기재되어 있는 Animation명을 기재합니다.

완성!

요약

Open Project가 되고 있는 Flare의 애니메이션을 Flutter로 움직여 보았습니다.
꽤 쉽게 할 수 있으므로 Flare가 유행하고 다양한 소재가 모이면 멋지네요!
가까운 안에 Flare에서 자전의 애니메이션도 만들어 보려고합니다!