Flutter中点击下载按钮从服务器下载视频到安卓手机的实现方法

问题说明 #

你当前的代码缺少下载进度监听逻辑，同时路径拼接方式存在跨平台兼容性问题，这是无法展示进度条的核心原因。

修正后的下载函数实现 #

import 'package:dio/dio.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'package:path/path.dart' as path;

// 传入进度回调函数，用来实时通知UI层更新进度
Future<void> downloadUsingDio(String mediaURL, String fileName, Function(int received, int total) onProgress) async {
  Dio dio = Dio();
  final appDir = await getApplicationDocumentsDirectory();
  // 用path.join拼接路径，自动适配不同平台的路径分隔符
  final savePath = path.join(appDir.path, fileName);
  await dio.download(
    mediaURL,
    savePath,
    // 进度回调，received是已下载字节数，total是总字节数
    onReceiveProgress: (received, total) {
      if (total != -1) { // 确保服务端返回了内容长度
        onProgress(received, total);
      }
    },
  );
}

配合进度条的UI使用示例（Flutter环境） #

// 定义进度变量，范围0-1
ValueNotifier<double> downloadProgress = ValueNotifier(0.0);
// 按钮点击触发下载
ElevatedButton(
  onPressed: () async {
    await downloadUsingDio(
      "你的视频地址",
      "test_video.mp4",
      (received, total) {
        // 计算进度，更新进度变量
        downloadProgress.value = received / total;
      },
    );
  },
  child: const Text("下载视频"),
),
// 进度条组件，监听进度变量更新
ValueListenableBuilder<double>(
  valueListenable: downloadProgress,
  builder: (context, progress, child) {
    return LinearProgressIndicator(
      value: progress,
      backgroundColor: Colors.grey[200],
      valueColor: const AlwaysStoppedAnimation<Color>(Colors.blue),
    );
  },
)

注意事项 #

• 如果下载时total始终返回-1，需要确认服务端是否配置了Access-Control-Expose-Headers，允许前端获取content-length响应头
• 大文件下载建议添加断点续传逻辑，避免下载中断后需要重新从头下载
• 安卓端需要申请存储权限，iOS端需要在Info.plist中配置网络访问权限

内容的提问来源于stack exchange，提问作者4NM20MC031 JAGANNIVASA B