Flutter：如何在显示图片前校验图片URL是否可访问？

核心思路 #

要移除不可访问的图片，不能通过Image.network的Widget层面处理——它的网络请求是异步且在渲染后发起的，无法提前拦截并修改列表长度。正确的做法是提前通过HTTP请求预检查每个URL的可用性，筛选出有效URL后再构建列表。

具体实现步骤 #

1. 添加HTTP依赖 #

在pubspec.yaml中引入http包用于网络请求：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

2. 编写URL筛选函数 #

通过HEAD请求（仅获取响应头，比GET更高效）检查每个URL的状态码，收集能正常访问的URL：

import 'package:http/http.dart' as http;

Future<List<String>> filterValidImageUrls(List<String> urls) async {
  final validUrls = <String>[];
  for (final url in urls) {
    try {
      // 发起HEAD请求，设置超时避免卡住
      final response = await http.head(Uri.parse(url))
          .timeout(const Duration(seconds: 5));
      // 状态码200-299表示请求成功
      if (response.statusCode >= 200 && response.statusCode < 300) {
        validUrls.add(url);
      }
    } catch (_) {
      // 捕获网络错误、超时、无效URL等异常，直接跳过当前URL
      continue;
    }
  }
  return validUrls;
}

3. 用FutureBuilder构建列表 #

通过FutureBuilder处理异步筛选过程，显示加载状态，筛选完成后渲染仅含有效图片的ListView：

class ValidImageList extends StatelessWidget {
  // 原始URL列表
  final List<String> originalUrls = [
    "https://example.com/valid-image-1.jpg",
    "https://example.com/403-forbidden.jpg",
    "https://example.com/valid-image-2.jpg",
  ];

  ValidImageList({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("有效图片列表")),
      body: FutureBuilder<List<String>>(
        future: filterValidImageUrls(originalUrls),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 加载中显示进度圈
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return const Center(child: Text("筛选图片失败"));
          } else if (snapshot.data?.isEmpty ?? true) {
            return const Center(child: Text("没有可用图片"));
          } else {
            // 渲染仅含有效URL的列表
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return Image.network(snapshot.data![index]);
              },
            );
          }
        },
      ),
    );
  }
}

注意事项 #

• 如果部分服务器拒绝HEAD请求，可以替换为GET请求并仅读取响应头（无需下载完整图片），避免浪费带宽。
• 记得在Android的AndroidManifest.xml中添加网络权限：<uses-permission android:name="android.permission.INTERNET" />，iOS无需额外配置（默认允许）。
• 可根据业务需求调整状态码判断逻辑，比如允许304（缓存命中）等状态。

内容的提问来源于stack exchange，提问作者Michael Scofield