如何处理Flutter中Image.network()的无效URL异常？

核心方案：利用Image.network的errorBuilder参数 #

Image.network内置了errorBuilder回调机制，当图片加载失败（包含无效链接、网络异常、资源不存在等场景）时会触发该回调，返回自定义替代Widget即可避免应用崩溃。

修改后的代码示例 #

child: ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Image.network(
    imageController.text,
    fit: BoxFit.cover,
    // 加载失败时的替代UI
    errorBuilder: (context, error, stackTrace) {
      return Container(
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Icon(
          Icons.broken_image,
          color: Colors.grey,
          size: 40,
        ),
      );
    },
    // 可选：添加加载中的占位UI
    loadingBuilder: (context, child, loadingProgress) {
      if (loadingProgress == null) return child;
      return Container(
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Center(
          child: CircularProgressIndicator(strokeWidth: 2),
        ),
      );
    },
  ),
),

额外优化：提前校验链接合法性 #

在用户输入完成后，先校验链接格式，减少无效请求的触发：

bool isValidImageUrl(String url) {
  try {
    final uri = Uri.parse(url);
    return uri.isAbsolute && (uri.scheme == 'http' || uri.scheme == 'https');
  } catch (_) {
    return false;
  }
}

// 使用示例：在输入确认时调用
if (!isValidImageUrl(imageController.text)) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('请输入有效的网络图片链接')),
  );
}

进阶方案：使用第三方图片加载库 #

如果需要更强的缓存、错误处理能力，可以用cached_network_image库：

1. 在pubspec.yaml添加依赖：

dependencies:
  cached_network_image: ^3.3.0

2. 替换Image.network为CachedNetworkImage：

child: ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: CachedNetworkImage(
    imageUrl: imageController.text,
    fit: BoxFit.cover,
    placeholder: (context, url) => Container(
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Center(child: CircularProgressIndicator(strokeWidth: 2)),
    ),
    errorWidget: (context, url, error) => Container(
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(10),
      ),
      child: const Icon(Icons.broken_image, color: Colors.grey, size: 40),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Lucas Correia