为 Lottie 动画设置 BoxFit Cover

问题描述

嗨，我希望我的 Flutter 应用程序具有全屏启动动画。 我使用 Lottie 来显示动画，但是我无法获得正确的取景和适合度。

我希望动画适合整个屏幕。如果屏幕太大而无法全屏显示动画，我想“放大”并关闭边缘（默认 BoxFit.cover 行为）。

这是我当前的代码：

Widget build(BuildContext context) {
return BaseWidget<StartUpviewmodel>(
  model: StartUpviewmodel(),builder: (context,model,child) {
    return Scaffold(
        body: SizedBox(
            height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,child: Lottie.asset(
                "assets/lottie/dummy.json",fit: BoxFit.cover,controller: animationController,onLoaded: (comp) {
                animationController
                ..duration = comp.duration
                ..forward();
           },),));
  },);

} }

但是，如果我使用此代码，动画不会居中。它放大了动画，但将动画的左侧与屏幕对齐，并通过这样做裁剪掉了右侧。

解决方法

经过反复试验，我发现了！我将把它留在这里，因为它非常不直观，将来可能有人需要它：

Widget build(BuildContext context) {
return BaseWidget<StartUpViewModel>(
  model: StartUpViewModel(),builder: (context,model,child) {
    return Scaffold(
      body: SizedBox.expand(
        child: FittedBox(
          fit: BoxFit.cover,child: Lottie.asset(
            "assets/lottie/dummy.json",fit: BoxFit.fill,controller: animationController,onLoaded: (comp) {
              animationController.addStatusListener((status) {
                if (status == AnimationStatus.completed) {
                  print("AnimationComnpleze");
                  setState(() {});
                }
              });
              animationController
                ..duration = comp.duration
                ..forward();
            },),);
  },);

} }