[Day04] Flutter with GetX Lottie animations

Lottie

Lottie源自Airbnb开源, 各类前端的支援度不错,
结论是 ~~可以压榨设计师用AE画出很炫泡的动画後直接放上去~~.

pubspec.yaml 档案里新增 dependencies
与 assets路径(动画的json档放置路径)

dependencies:
  flutter:
    sdk: flutter

  lottie: ^1.1.0
  equatable: ^2.0.3

  assets:
    - assets/
    - assets/lottie/

新增assets与lottie资料夹
把设计师辛苦设计的json档放到路径底下

接下来封装一层 Lottie widget 也可以直接用
这个Loading动画可能不只一个地方会用到, 所以选择封装起来

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LoadingLottieView extends StatelessWidget {
  const LoadingLottieView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      //後面有用到Getx可以替换成
      //height: Get.height,
      //width: Get.width,
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.height * 0.2,
      child: Transform.scale(
        scale: 1.3,
        child: Lottie.asset(
          'assets/lottie/loadingrepeatWhite.json',
          fit: BoxFit.fitHeight,
        ),
      ),
    );
  }
}

接着实际使用在指定的页面上
上半部的widget用刚刚封装好的LoadingLottieView
下半部使用network url网路资源读取, pub.dev里的范例

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:it_home/component/loadingLottie.dart';
import 'package:it_home/pages/Lottie/LottiePageController.dart';
import 'package:lottie/lottie.dart';

class LottiePage extends GetView<LottiePageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('LottiePage')),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Center(
              child: Container(
                color: Colors.blue[100],
                child: LoadingLottieView(),
              ),
            ),
            Lottie.network(
              'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
              controller: controller.animationController,
            ),
          ],
        ),
      ),
    );
  }
}

在此有使用到GetxController, 将Lottie的动画控制用AnimationController处理

import 'package:flutter/animation.dart';
import 'package:get/get.dart';

class LottiePageController extends GetxController
    with SingleGetTickerProviderMixin {
  late AnimationController animationController;

  @override
  void onInit() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 1500), vsync: this);

    //只播放一次
    animationController.forward();

    //重复播放,reverse = true 跑完会倒着回放
    animationController.repeat(reverse: true);
    super.onInit();
  }
}

可以使用设计师用AE设计好输出的json档
也可用放在网路上的资源(pub.dev范例)
实际画面