虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

FlutterでLottieを使う

FlutterでLottieを使う

Lottieを使うためのプラグインは二つあります。

pub.dartlang.org

pub.dartlang.org

このふたつの実装を読んでいると、fluttieはJavaかobjective-cのコードを内部的に呼んでるだけですが、lottie_flutterはDartのコード自身で動いてるようでこちらの方がよさそうだと判断したので今回は2の方法を使おうと思います。

準備

dependencies:
  lottie_flutter: ^0.2.0

次に下記を実装

$ flutter packages get

実装

 --- widget部分
 LottieComposition _composition;
 
   @override
   void initState() {
     super.initState();
     loadAsset("lottie/heart.json").then((LottieComposition composition) {
       setState(() {
         _composition = composition;
       });
     });
   }
   
  new Lottie(
               composition: _composition,
               size: const Size(100, 100),
             ),
------

 Future<LottieComposition> loadAsset(String assetName) async {
     return await rootBundle
         .loadString(assetName)
         .then<Map<String, dynamic>>((String data) => json.decode(data))
         .then((Map<String, dynamic> map) => new LottieComposition.fromMap(map));
   }