美文网首页
flutter:配合dio的刷新动画

flutter:配合dio的刷新动画

作者: ChaosHeart | 来源:发表于2022-03-07 15:51 被阅读0次

1. 通过navigatorKey的方式

void main() {
  runApp(MyApp());
}

final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  MyApp() {
  }

  // This widget is the view.common.root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
    );
  }
}

2. 获取context:

BuildContext context = navigatorKey.currentState.overlay.context

注意:通过这种方式获取的context在某些情况下需要放在
Future.delayed(Duration(seconds: 0)).then((onValue) { });

3.刷新动画

///网络刷新动画
showStartProgressDialog(BuildContext context) async {
  return showDialog(
      barrierDismissible: true,
      context: context,
      builder: (BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.transparent,
          body: Center(
            child: Container(
              height: 56,
              width: 56,
              child: CircularProgressIndicator(),
            ),
          ),
        );
      });
}

///隐藏刷新动画
dismissEndProgressDialog(BuildContext context, {int seconds = 0}) {
  //延时
  Future.delayed(Duration(seconds: seconds), () {
    //关闭
    Navigator.of(context).pop();
  });
}

4.dio走接口的时候使用


  static Dio _dioPda;

  initHttp(String site) {
    
    //测试url
    String baseUrl = _TEST_PDA_URL;

    //基础配置
    BaseOptions options = BaseOptions(
      baseUrl: baseUrl,
      connectTimeout: 30000,
      receiveTimeout: 30000,
      headers: {},
      contentType: 'application/json; charset=utf-8',
      responseType: ResponseType.plain,
    );

    ///全局context
    BuildContext context = navigatorKey.currentState.overlay.context;

    //InterceptorsWrapper
    var wrapper = InterceptorsWrapper(
      onRequest: (options, handler) async {
//添加动画
        showStartProgressDialog(context);
        // 在请求被发送之前做一些事情
        _dioPda.lock(); // 锁住请求
     
        _dioPda.unlock(); // 打开请求
  
        // 在请求数据之前做一些预处理
        return handler.next(options); //continue
      },
      // 如果你想完成请求并返回一些自定义数据,可以返回一个`Response`对象或返回`dio.resolve(data)`。
      // 这样请求将会被终止,上层then会被调用,then中返回的数据将是你的自定义数据data.
      onResponse: (response, handler) {
//取消
        dismissEndProgressDialog(context);

        // 在返回响应数据之前做一些预处理
        return handler.next(response); // continue
      },
      // 如果你想终止请求并触发一个错误,你可以返回一个`DioError`对象,或返回`dio.reject(errMsg)`,
      // 这样请求将被中止并触发异常,上层catchError会被调用。
      onError: (error, handler) {
//取消
        dismissEndProgressDialog(context);
        if (error.type == DioErrorType.connectTimeout) {
          ImesBasePlugins.instance.showToast("网络连接超时,请联系管理员");
        } else {
          ImesBasePlugins.instance.showToast("网络出现问题,请重试");
        }

        // 在返回响应数据之前做一些预处理
        // 当请求失败时做一些预处理
        return handler.next(error); //continue
      },
    );

    //添加基础配置
    _dioPda = Dio(options);
    //添加拦截器
    _dioPda.interceptors.add(wrapper);
  }

相关文章

网友评论

      本文标题:flutter:配合dio的刷新动画

      本文链接:https://www.haomeiwen.com/subject/qprnrrtx.html