Flutter封装加载状态视图，加载中、加载成功、加载失败、加载无数据

先看图，无图无真相~

具体实现如下：

创建load_state.dart

//四种视图状态
enum LoadState { State_Success, State_Error, State_Loading, State_Empty }

///根据不同状态来展示不同的视图
class LoadStateLayout extends StatefulWidget {

  final LoadState state; //页面状态
  final Widget successWidget;//成功视图
  final VoidCallback errorRetry; //错误事件处理
  final VoidCallback emptyRetry; //空数据事件处理

  LoadStateLayout(
      {Key key,
        this.state = LoadState.State_Loading,//默认为加载状态
        this.successWidget,
        this.errorRetry,
        this.emptyRetry
      })
      : super(key: key);

  @override
  _LoadStateLayoutState createState() => _LoadStateLayoutState();
}

class _LoadStateLayoutState extends State<LoadStateLayout> {
  @override
  Widget build(BuildContext context) {
    return Container(
      //宽高都充满屏幕剩余空间
      width: double.infinity,
      height: double.infinity,
      child: _buildWidget,
    );
  }

  ///根据不同状态来显示不同的视图
  Widget get _buildWidget {
    switch (widget.state) {
      case LoadState.State_Success:
        return widget.successWidget;
        break;
      case LoadState.State_Error:
        return _errorView;
        break;
      case LoadState.State_Loading:
        return _loadingView;
        break;
      case LoadState.State_Empty:
        return NoDataView(widget.emptyRetry);
        break;
      default:
        return null;
    }
  }

  ///加载中视图
  Widget get _loadingView {
    return Container(
      width: double.infinity,
      height: double.infinity,
      alignment: Alignment.center,
      color: Colors.white,
      child: Container(
        height: 200,
        padding: EdgeInsets.all(10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Container(
              width: 150,
              height: 150,
              child: Image.asset('images/cargo_loading.gif'),
            ),
            Text('拼命加载中...',style: TextStyle(color: ColorConfig.COLOR_153,fontSize: ScreenUtil().setSp(24)),)],
        ),
      ),
    );
  }

  ///错误视图
  Widget get _errorView {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: InkWell(
        onTap: widget.errorRetry,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: ScreenUtil().setWidth(405),
              height: ScreenUtil().setHeight(317),
              child: Image.asset('images/load_error.png'),
            ),
            Text("加载失败，请轻触重试!",style: TextStyle(color: ColorConfig.COLOR_153,fontSize: ScreenUtil().setSp(24)),),
          ],
        ),
      )
    );
  }
}

no_data.dart

class NoDataView extends StatefulWidget {


  final VoidCallback emptyRetry; //无数据事件处理

  NoDataView(this.emptyRetry);

  @override
  _NoDataViewState createState() => _NoDataViewState();
}

class _NoDataViewState extends State<NoDataView> {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        width: ScreenUtil().setWidth(750),
        height: double.infinity,
        child: InkWell(
          onTap: widget.emptyRetry,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: ScreenUtil().setWidth(405),
                height: ScreenUtil().setHeight(281),
                child: Image.asset('images/no_data.png'),
              ),
              Text('暂无相关数据,轻触重试~',style: TextStyle(color: ColorConfig.COLOR_153,fontSize: ScreenUtil().setSp(24)),)
            ],
          ),
        )
    );
  }
}

至此，封装完毕！！！
下面开始使用：

//页面加载状态，默认为加载中
LoadState _layoutState = LoadState.State_Loading;
Widget _listView(BuildContext context){
    return LoadStateLayout(
      state: _layoutState,
      emptyRetry: (){
        setState(() {
          _layoutState = LoadState.State_Loading;
        });
        _getOrderList();
      },
      errorRetry: () {
        setState(() {
          _layoutState = LoadState.State_Loading;
        });
        _getOrderList();
      }, //错误按钮点击过后进行重新加载
      successWidget: Center(
          child: EasyRefresh(
            child: ListView.builder(
              //controller: scrollController,
              itemBuilder: (context, index) {
                return _item(orderList, index);
              },
              itemCount: orderList.length,
            ),
            //firstRefresh: true,
            controller: _controller,
            header: ClassicalHeader(
              refreshText: '下拉刷新',
              refreshReadyText: '释放刷新',
              refreshingText: '正在刷新...',
              refreshedText: '刷新完成',
              refreshFailedText: '刷新失败',
              noMoreText: '没有更多',
              infoText: '更新于 %T',
            ),
            footer: ClassicalFooter(
                loadedText: '加载完成',
                loadReadyText: '释放加载',
                loadingText: '正在加载...',
                loadFailedText: '加载失败',
                noMoreText: '没有更多',
                infoText: '更新于 %T'
            ),
            onRefresh: () async{
              _getOrderList();
            },
            onLoad: orderList.length==10? () async{
              _getMoreList();
            }:null,
          )
      ),
    );
  }