我有一个Lottie动画,用作加载屏幕:
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';
class Loading extends StatelessWidget {
final String loadingText;
Loading({this.loadingText});
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (loadingText != null) _buildLoadingText(loadingText),
_buildAnimation(),
],
),
);
}
Widget _buildLoadingText(String text) {
return Text(
loadingText,
style: GoogleFonts.poppins(
textStyle:
TextStyle(fontWeight: FontWeight.w500, color: Colors.black)),
);
}
Widget _buildAnimation() {
return Lottie.asset('assets/lottie/heartbeat_loading.json',
width: 300, repeat: true, animate: true);
}
}
当我的应用程序最初加载时,我会像这样使用它:
_determineHome() {
return StreamBuilder(
stream: AppBlocContainer().authenticationBloc().loggedIn,
builder: (context, AsyncSnapshot<AuthenticationStatus> snapshot) {
// return Loading();
return AnimatedSwitcher(
duration: Duration(seconds: 2),
child: !snapshot.hasData
? Loading(
loadingText: 'Loading...',
)
: _buildSecondChild(snapshot.data));
},
);
这个方案是有效的,唯一的问题是Lottie动画加载可能会晚一两秒,当Lottie资源加载完成时,页面已经完成了过渡。
我曾尝试通过在main()
函数中预缓存SVG图像来解决这个问题:
Future.wait([
precachePicture(
ExactAssetPicture(
SvgPicture.svgStringDecoder, 'assets/svg/login.svg'),
null,
),
precachePicture(
ExactAssetPicture(
SvgPicture.svgStringDecoder, 'assets/svg/logo.svg'),
null,
),
precachePicture(
ExactAssetPicture(
SvgPicture.svgStringDecoder, 'assets/svg/signup_panel_1.svg'),
null,
)
]);
我能用Lottie做同样的事情吗?