Flutter Live 2018で発表されたFlareをFlutterで動かす方法

この記事は全部俺 Advent Calendar 2018の10日目の記事です。

やりたいこと

Flutter Live 2018で発表された、2dimensions社のFlareを使って、以下のようなアニメーションをFlutter上で動作させます。

Flareから、欲しいflrファイルをダウンロードする

2dimensionsのサイトにアカウントを作成してログインし、ExploreからFlareのファイルを探してきます。(Read Onlyのものはダウンロードできません。。)
今回はsushiを使用することにしました。

画面右上の共有アイコンを押し、Exportを選択して下記の画像のように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で自前のアニメーションも作ってみようと思います！