flutter - 如何在颤动的容器背景中显示 Lottie 文件

Question

现在显示这样的 Lottie 文件。

      Container(
             width: 400,
             child: Lottie.asset("assets/lotties/GamePlanAnimation.json")
        );

现在我需要将 Lottie 文件显示为背景

标签： flutterlottie

Answer 1

首先，我使用的解决方案创建了一个单独的类，您将图像设置为应用程序屏幕的背景

class BackgroundWidget extends StatelessWidget {
  final childView;

  BackgroundWidget({required this.childView});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          alignment: Alignment.bottomCenter, //set as like you want
          image: AssetImage(
            'assets/background.png',
          ),
        ),
      ),
      child: ClipRRect(
        // make sure we apply clip it properly
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(
            alignment: Alignment.center,
            color: Colors.white.withOpacity(0.8),
            child: childView,
          ),
        ),
      ),
    );
  }
}

然后你可以像这样在任何地方使用这个小部件类。

MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primaryColor: Color(0xff18728a),
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Dashboard'),
      brightness: Brightness.dark,
    ),
    body: SafeArea(
      child: BackgroundWidget(
        // here is your widget class for background
        childView: Container(),
      ),
    ),
  ),
);