Flutter图片加载失败处理插件flutter_url_image_load_fail的使用

flutter_url_image_load_fail 是一个 Flutter 插件，允许从 URL 加载图像，并定义在加载、成功加载和加载失败状态时显示的组件。

开始使用

添加依赖

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

dependencies:
  flutter_url_image_load_fail: ^1.0.0

导入插件

在 Dart 文件中导入插件：

import 'package:flutter_url_image_load_fail/flutter_url_image_load_fail.dart';

使用示例

在应用中使用 LoadImageFromUrl 组件：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('flutter_url_image_load_fail 示例'),
    ),
    body: Center(
      child: LoadImageFromUrl(
        imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png', // 图像 URL
        buildSuccessWidget: (image) => image, // 成功加载图像时显示的组件
        buildLoadingWidget: () => Text('加载中...'), // 加载中时显示的组件
        buildFailedWidget: (retryLoadImage, code, message) {
          return ElevatedButton(
            child: Text('重试'),
            onPressed: () {
              retryLoadImage();
            },
          );
        },
        requestTimeout: Duration(seconds: 5), // 可选：设置请求超时时间
      ),
    ),
  );
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_url_image_load_fail 插件来加载网络图片，并处理加载失败的情况：

import 'package:flutter/material.dart';
import 'package:flutter_url_image_load_fail/flutter_url_image_load_fail.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter_url_image_load_fail 示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('示例'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(30),
          child: LoadImageFromUrl(
            imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png', // 图像 URL
            buildSuccessWidget: (image) => image, // 成功加载图像时显示的组件
            buildLoadingWidget: () => Text(
              '我的自定义加载中...',
              style: TextStyle(fontSize: 21, color: Colors.blueAccent, fontWeight: FontWeight.w600),
            ), // 加载中时显示的组件
            buildFailedWidget: (void Function() retryLoadImage, int code, String errorMessage) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    child: Text(
                      '发生错误：\n\n错误: $errorMessage\n\n代码: ${code.toString()}',
                      style: TextStyle(color: Colors.black, fontSize: 18, fontWeight: FontWeight.w600),
                    ),
                    padding: EdgeInsets.only(bottom: 30),
                  ),
                  ElevatedButton(
                    child: Text(
                      '重试',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
                    ),
                    onPressed: () {
                      retryLoadImage();
                    },
                  ),
                ],
              );
            },
            requestTimeout: Duration(seconds: 5), // 可选：设置请求超时时间
          ),
        ),
      ),
    );
  }
}