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

tranquilpeak

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tranquilpeak

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

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

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

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

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

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

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

pubspec.yaml

1
2
3

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

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

1	`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'),
    ));
  }
}

あとはコードを保存して実際にビルドし実行してみましょう。

すると冒頭で添付したYoutube動画のようなアニメーションが画面中央に表示されていると思います。

※もし表示されなければ本記事にコメントください。

また、Lottieはアプリ内に組み込む他CDN等にJSONデータを配置しアクセスする方法でもアニメーションが表示できます。