Flutter中如何将Lottie文件设置为Container的背景

因为Lottie是动画组件，无法直接作为Container的decoration属性值，推荐使用Stack组件分层布局实现需求：

Stack(
  children: [
    // 底层Lottie动画作为背景
    Lottie.asset(
      "assets/lotties/GamePlanAnimation.json",
      width: 400,
      // 可根据需求调整适配模式，可选BoxFit.fill、BoxFit.contain等
      fit: BoxFit.cover,
    ),
    // 上层为你原有的Container内容
    Container(
      width: 400,
      // 此处放置原本需要在Container内展示的子组件
      child: const Text("示例上层内容"),
    ),
  ],
)

可选优化 #

• 如果需要调整背景动画的透明度，可以给Lottie组件包裹一层Opacity组件，调整opacity参数即可
• 如果Container带有圆角、边框等样式，可以给底层的Lottie组件包裹ClipRRect组件，设置相同的圆角参数保证样式一致

内容的提问来源于stack exchange，提问作者Imran Sk