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

この記事は[全部俺 Advent Calendar 2018](https://adventar.org/calendars/3702)の10日目の記事です。

# やりたいこと
Flutter Live 2018で発表された、2dimensions社のFlareを使って、以下のようなアニメーションをFlutter上で動作させます。
![sushi_flare.gif](https://qiita-image-store.s3.amazonaws.com/0/190807/b8042b4c-1938-2d63-a125-94d139ade7a2.gif)


## Flareから、欲しいflrファイルをダウンロードする
[2dimensions](https://www.2dimensions.com/)のサイトにアカウントを作成してログインし、ExploreからFlareのファイルを探してきます。(Read Onlyのものはダウンロードできません。。)
今回は[sushi](https://www.2dimensions.com/a/pollux/files/flare/sushi)を使用することにしました。

画面右上の共有アイコンを押し、Exportを選択して下記の画像のようにFlutterのbinaryをEXPORTします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/190807/b8ed04c4-f676-825b-abbe-c60a6b760e70.png)

これでローカルに`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`を配置すれば準備完了です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/190807/dda5df4a-53f7-c03b-4524-cb158996ac6f.png)

## 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名を記載します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/190807/595f2a8b-4f0a-af27-0d7a-4ed66f45c297.png)

## 完成！
![sushi_flare.gif](https://qiita-image-store.s3.amazonaws.com/0/190807/b8042b4c-1938-2d63-a125-94d139ade7a2.gif)

## まとめ
Open ProjectになっているFlareのアニメーションをFlutterで動かしてみました。
かなり簡単にできるので、Flareが流行っていろいろな素材が集まると素敵ですね！
近い内にFlareで自前のアニメーションも作ってみようと思います！