为 Lottie 动画设置 BoxFit Cover答案

【问题标题】：Set BoxFit Cover for Lottie animation为 Lottie 动画设置 BoxFit Cover
【发布时间】：2021-07-13 10:26:58
【问题描述】：

您好，我希望我的 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();
           },
        ),
     ));
  },
);

} }

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

【问题讨论】：

标签： flutter flutter-layout flutter-animation lottie

【解决方案1】：

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

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();
            },
          ),
        ),
      ),
    );
  },
);

} }

【讨论】：