如何显示Lottie文件在容器背景在Flutter

2admgd59  于 2023-10-22  发布在  Flutter
关注(0)|答案(3)|浏览(118)

像这样展示洛蒂的档案。

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

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

ldfqzlk8

ldfqzlk81#

我没有使用容器,而是在Stack小部件中使用了一个Positioned小部件来调整Lottie动画的不同方面。下面是我的代码示例:

Stack(
      children: [
        Positioned(
          left: -200,
          top: -200,
          height: 400,
          width: 400,
          child: Opacity(
            opacity: 0.4,
            child: LottieBuilder.asset(
              "lib/assets/animations/login-rotation.json",
              reverse: true,
              options: LottieOptions(enableApplyingOpacityToLayers: true),
              fit: BoxFit.fill,
            ),
          ),
        ),],);
yrdbyhpb

yrdbyhpb2#

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

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

zmeyuzjn3#

你可以使用Stack:

Stack(
  children: [
    Container(
      width:double.infinity,
      height:double.infinity,
      child: Lottie.asset('assets/lottieFile.json'),
    ),

    // --
    // You can insert your content or code in here
    // --

  ]
)

相关问题