Flutter教程实现图片下载功能

在Flutter中实现图片下载功能时，尝试用dio下载网络图片并保存到本地相册，但遇到以下问题：

  1. 安卓端保存图片时始终提示"权限被拒绝"，已添加WRITE_EXTERNAL_STORAGE权限且动态请求了权限，但依然无效；
  2. iOS端使用image_gallery_saver插件保存后，相册中找不到下载的图片，返回的result.isSuccess却显示true；
  3. 下载进度回调不准确，有时直接从0跳到100%，想实现带进度条的UI效果该怎样优化？
    是否需要针对不同平台单独处理存储路径？求完整代码示例和解决方案。
3 回复

首先需要导入http和path_provider等依赖库。创建一个按钮点击事件，使用http.get发起网络请求获取图片数据。接着使用File类将数据写入本地文件夹，可借助path_provider的getTemporaryDirectory获取临时目录。最后展示图片时通过Image.file加载本地文件。

代码示例：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';

Future<void> downloadAndDisplayImage(String url) async {
  final response = await http.get(Uri.parse(url));
  final dir = await getTemporaryDirectory();
  final file = File('${dir.path}/image.jpg');
  await file.writeAsBytes(response.bodyBytes);
  // 展示图片
  showDialog(
    context: navigatorKey.currentState!.context,
    builder: (_) => Image.file(file),
  );
}

注意处理异常情况，比如网络失败或权限不足等问题。在Android上需添加互联网权限，在iOS上确保AppTransportSecurity设置允许HTTP请求。

更多关于Flutter教程实现图片下载功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现图片下载功能，首先需要使用http库获取图片数据，然后用path_provider获取本地存储路径，最后用File写入图片。以下是步骤：

  1. 添加依赖：
dependencies:
  http: ^0.15.0
  path_provider: ^2.0.9
  1. 获取图片并保存：
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';

Future<void> downloadImage(String url) async {
  try {
    // 下载图片
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      // 获取本地路径
      final directory = await getApplicationDocumentsDirectory();
      final filePath = '${directory.path}/downloaded_image.jpg';
      // 写入文件
      final file = File(filePath);
      await file.writeAsBytes(response.bodyBytes);
      print('图片已保存到：$filePath');
    } else {
      print('下载失败，状态码：${response.statusCode}');
    }
  } catch (e) {
    print('下载错误：$e');
  }
}

记得替换url为你想下载的图片地址。此代码会在应用沙盒目录保存图片。

Flutter实现图片下载功能

在Flutter中实现图片下载功能可以使用dio和path_provider这两个库。以下是实现步骤：

1. 添加依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  dio: ^5.0.0  # 用于网络请求
  path_provider: ^2.0.0  # 用于获取本地存储路径
  permission_handler: ^10.0.0  # 用于请求存储权限(可选)

2. 实现代码

import 'dart:io';
import 'package:dio/dio.dart';
import 'package:path_provider/ppath_provider.dart';
import 'package:permission_handler/permission_handler.dart';

Future<String> downloadImage(String url, {String? fileName}) async {
  // 请求存储权限(Android需要)
  if (await Permission.storage.request().isGranted) {
    try {
      // 获取下载目录
      Directory? downloadsDirectory = await getExternalStorageDirectory();
      String savePath = '${downloadsDirectory?.path}/${fileName ?? 'downloaded_image.jpg'}';

      // 使用dio下载文件
      Dio dio = Dio();
      await dio.download(url, savePath);
      
      return savePath;
    } catch (e) {
      throw Exception('下载失败: $e');
    }
  } else {
    throw Exception('没有存储权限');
  }
}

3. 使用方法

ElevatedButton(
  onPressed: () async {
    try {
      String path = await downloadImage(
        'https://example.com/image.jpg',
        fileName: 'my_image.jpg'
      );
      print('图片已保存到: $path');
    } catch (e) {
      print('下载失败: $e');
    }
  },
  child: Text('下载图片'),
)

注意事项

  1. 在Android上需要添加存储权限到AndroidManifest.xml文件
  2. iOS可能需要配置Info.plist中的权限
  3. 对于不同类型的图片，可能需要调整文件名后缀(.jpg, .png等)
  4. 可以在下载时显示进度条，通过在dio.download()中添加onReceiveProgress回调

如果需要更详细的进度显示或错误处理，可以扩展上述代码。

回到顶部