Flutter取消下载及拦截器

一、前言

下载大文件时,不想等待,既可以选择取消下载。预览如下:

在这里插入图片描述

二、引用

dio

功能:网络请求。

地址:https://pub.dev/packages/dio

三、使用

如下功能:

  1. 下载进度条
  2. 取消下载
  3. 拦截器

1. 拦截器

dio.interceptors.add(InterceptorsWrapper(
  onRequest: (RequestOptions requestOptions, RequestInterceptorHandler handler){
    print("请求之前");
    handler.next(requestOptions);
  }, onResponse: (Response<dynamic> response, ResponseInterceptorHandler handler){
    print("响应之前");
    handler.next(response);
  }, onError: (DioError error, ErrorInterceptorHandler handler){
    print("错误之前");
    setState(() {
      _process = 0.0;
    });
    handler.next(error);
  }
));

2. 使用

import 'package:dio/dio.dart';
/// 第三方
import 'package:get/get.dart' hide Response;
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

/// 本地资源
import '../../theme/utils/export.dart';
import '../../utils/widget/common.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  var _process = 0.0;

  late CancelToken token;

  /// 主内容
  Widget mainBody(BuildContext context){
    return Column(
      children: [
        safePadding(context, c_FF),
        customerHeader(context, c_FF, "Dio取消请求", leftContent: GestureDetector(
          onTap: ()=>Get.back(),
          child: Image.asset(
            R.imagesCommonBackIcon,
            width: 24.dp,
            height: 24.dp,
          ),
        )),
        Get.getHeightBox(20.dp),
        GestureDetector(
          onTap: () async {
            /// dio使用get下载文件
            try{
              token = CancelToken();
              Dio dio = new Dio();
              /// dio拦截器部分--开始
              dio.interceptors.add(InterceptorsWrapper(
                onRequest: (RequestOptions requestOptions, RequestInterceptorHandler handler){
                  print("请求之前");
                  handler.next(requestOptions);
                }, onResponse: (Response<dynamic> response, ResponseInterceptorHandler handler){
                  print("响应之前");
                  handler.next(response);
                }, onError: (DioError error, ErrorInterceptorHandler handler){
                print("错误之前");
                setState(() {
                  _process = 0.0;
                });
                handler.next(error);
              }
              ));
              /// dio拦截器部分--结束
              var response = await dio.get(
                  "https://pic.netbian.com/uploads/allimg/180826/113958-153525479855be.",
                  cancelToken: token,
                  onReceiveProgress: (num received, num total){ /// 获取下载进度
                    setState(() {
                      _process = double.parse('${(received / total).toStringAsFixed(2)}');
                    });
                  },
                  options: Options(
                    responseType: ResponseType.bytes,
                    followRedirects: false,
                  )
              );
              print(response);
            } on DioError catch(e) {
              print("response.statusCode: ${e.type}");
            }
          },
          child: Text("请求数据"),
        ),
        Get.getHeightBox(20.dp),
        CircularProgressIndicator(
          value: _process,
        ),
        Get.getHeightBox(20.dp),
        Text("下载进度:${_process*100}%"),
        Get.getHeightBox(20.dp),
        GestureDetector(
          onTap: ()=>{
            token.cancel()
          },
          child: Text("取消请求"),
        ),
        Get.getHeightBox(20.dp),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return customerTheme(false, SystemUiOverlayStyle.dark, mainBody(context), boxDecoration: BoxDecoration(
        color: c_FC
    ), willPop: true);
  }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

倾云鹤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值