Flutter 基于Lottie实现全局加载组件封装

添加插件

pubspec.yaml

添加 lottie 动画插件

lottie: ^0.7.0

配置本地动画资源

pubspec.yaml

assets:
     - images/
     - assets/

封装 Lottie 加载动画

loading_container.dart

class LoadingContainer extends StatelessWidget {
  final Widget child;
  final bool isLoading;

  // 加载动画是否覆盖在原有界面上
  final bool cover;

  const LoadingContainer({Key key, this.child, this.isLoading, this.cover})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (cover) {
      return Stack(
        children: [child, isLoading ? _loadingView : Container()],
      );
    } else {
      return isLoading ? _loadingView : child;
    }
  }

  Widget get _loadingView {
    return Center(child: Lottie.asset("assets/loading.json"));
  }
}

应用加载动画

home_page.dart

应用首页

 // 是否显示loading
 bool _isLoading = true;
 
 @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: LoadingContainer(
        isLoading: _isLoading,
        child: Column()
     );
 }

// 加载数据
void loadData() async {
	 try {
      // 加载数据逻辑
      setState(() {
        _isLoading = false; // 重置 loading 状态
      });
    } on NeedAuth catch (e) {
      print(e);
      showWarnToast(e.message);
      setState(() {
        _isLoading = false;  // 重置 loading 状态
      });
    } on HiNetError catch (e) {
      print(e);
      showWarnToast(e.message);
      setState(() {
        _isLoading = false;  // 重置 loading 状态
      });
    }
}