【flutter】Lottieアニメーションライブラリの使い方をわかりやすく解説

flutterでアニメーションの作り方を探している方向け。

コピペで簡単にアニメーションが実装できるLottieライブラリの使い方をデモコード付きでわかりやすく解説します。

この記事は以下のような方を対象者としています。

flutter初学者の方
flutterでアニメーションのやり方を探している方
flutter＋Lottieライブラリの組み込み方を探している方

今回作るflutter+lottieアニメーション
#

今回の記事ではこちらのLottieアニメーションをflutterで実装していきたいと思います。

前置き：Lottieアニメーションライブラリとは？
#

LottieアニメーションライブラリはAirbnb(民泊アプリ)が開発したアニメーションの作成・配布ができるサービスです。

jsonの形式で作成されたデータをWebアプリやモバイルアプリに簡単に組み込むことができます。

このLottieライブラリの特徴はアニメーション制御のコーディングなしで簡単にアニメーションを表示できることです。

また、商用利用も可能のためアプリやWebサービスに組み込むことも柔軟にできます。

それでは早速flutterでLottieアニメーションの組み込み方を説明します。

flutter+lottieでアニメーション実装その1 : アニメーションファイルのダウンロード
#

まずはLottieの公式サイトにアクセスしてください。

（アカウント未作成の方は無料で作れますので作成してください。）

すると下記画像のようなアニメーション一覧画面が表示されます。

今回は一番右に表示されているアニメーションをflutterアプリに組み込みます。

組み込みたいアニメーションをクリックし、画面上部のダウンロード→Lottie Jsonをクリックしてください。

これでLottie jsonデータをダウンロードできます。

flutter+lottieでアニメーション実装その2 : プロジェクトファイルを作成
#

まずはflutterのプロジェクトを自分のローカル上に作成しましょう。

まずはターミナルを開き下記コマンドを実行してください。

<!-- デスクトップ上にliquid-animationというflutterプロジェクトフォルダを作成 -->
$ flutter create ~/Desktop/lottie-animation

flutter+lottieでアニメーション実装その3 : lottieアニメーションファイルを配置
#

先ほど作ったプロジェクトファイルを開き、libフォルダと同じ階層にassetsフォルダを作成します。

そしてその中に先ほどダウンロードしたLottie Jsonファイルを格納します。

flutter+lottieでアニメーション実装その4 : pubspec.yamlファイルの修正
#

続いてコードから先ほど配置したLottieデータにアクセスするために、pubspec.yamlファイルを修正します。

pubspec.yamlとはパッケージ管理ファイルです。

pubspec.yamlはプロジェクトフォルダ直下に存在します。

50行目あたりにassetsとコメントアウトで書いてある箇所があると思います。

そちらを下記の通り修正してください。

<!-- To add assets to your application, add an assets section, like this: -->
  assets:
    - assets/

上記ファイル保存後にターミナル上で下記コマンドを実行します。

flutter pub get

これでコード上からassetsフォルダ内のlottieデータにアクセスできるようになりました。

flutter+lottieでアニメーション実装その5 : dartコードの実装
#

続いてdartのコードを修正していきます。

プロジェクトフォルダ直下のlib/main.dartファイルを開き、下記コピペをしてください。

デフォルトの不要なコメントアウトやコードは全て削除しています。

import 'package:flutter/material.dart';
<!-- 下記を追加 -->
import 'package:lottie/lottie.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    <!-- 下記を追加 -->
    return Scaffold(
        body: Center(
        child: Lottie.asset('assets/lottiefile.json'),
    ));
  }
}