🚶‍♂️

FlutterでLottieを使ってみた

2024/12/30に公開

 アニメーションを簡単に導入フリー素材のアニメーションが簡単にアプリに組み込むことができるサービスがあるのを最近知った。LottieFilesというサービスですね。以前は公式見るとあれ、SwiftUIとxmlのAndroidだけなのかと思っていたが、Dartのライブラリがあった。
https://lottiefiles.com/jp/

https://pub.dev/packages/lottie
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
This repository is an unofficial conversion of the Lottie-android library in pure Dart.
It works on Android, iOS, macOS, linux, windows and web.
LottieはAndroidとiOS用のモバイルライブラリで、BodymovinでjsonとしてエクスポートされたAdobe After Effectsアニメーションを解析し、モバイル上でネイティブにレンダリングします！
このリポジトリは、Lottie-androidライブラリを純粋なDartに変換した非公式なものです。
Android、iOS、macOS、linux、windows、webで動作します。

 これが作れます！https://youtube.com/shorts/85lifIlz55M
まずは公式サイトに行ってフリー素材のファイルをJSON形式でダウンロードして、Flutterのプロジェクトに追加しよう。好きな素材を選んでください。




assetsディレクトリを作成する。pubspec.yamlで読み込めるように設定する。

ソースコードはこれだけ。お散歩アプリをイメージして背景をベージュにしてみた。ナチュラルカラーが合うのでは？
公式の解説のシンプルな使い方を試してみる。
Simple animation

This example shows how to display a Lottie animation in the simplest way.

The Lottie widget will load the json file and run the animation indefinitely.
シンプルなアニメーション

この例では、最も簡単な方法でLottieアニメーションを表示する方法を示します。

Lottieウィジェットはjsonファイルを読み込み、アニメーションを無期限に実行します。
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottieDemo extends StatelessWidget {
  const LottieDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow[100],
      body: Center(
        child: Lottie.asset('assets/walk.json'),
      ),
    );
  }
}
作成したモジュールをインポートしてみよう。これで表示できるはず。
main.dart
import 'package:flutter/material.dart';
import 'package:widget_cookbook_demo/example/lottie_demo/lottie_demo.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const LottieDemo(),
    );
  }
}

 最後にアニメーションをアプリに簡単に導入する方法をご紹介しました。これで可愛いアプリやインタラクティブなアプリを簡単に作れるかもしれない？
さくしんさんのブログも参考になるのでなるので見てみてください。

https://flutter.salon/plugin/lottie/

アニメーションを簡単に導入

これが作れます！

最後に

Discussion