像这样展示洛蒂的档案。
Container( width: 400, child: Lottie.asset("assets/lotties/GamePlanAnimation.json") );
现在我需要显示Lottie文件作为背景
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, ), ), ),],);
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(), ), ), ), );
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 // -- ] )
3条答案
按热度按时间ldfqzlk81#
我没有使用容器,而是在Stack小部件中使用了一个Positioned小部件来调整Lottie动画的不同方面。下面是我的代码示例:
yrdbyhpb2#
首先,我的解决方案是创建一个单独的类,将图像设置为应用程序屏幕的背景
然后你可以在任何地方使用这个窗口小部件类。
zmeyuzjn3#
你可以使用Stack: