如何在flutter中构建自定义图像提供程序？

Question

我想为我自己的图像类编写一个图像提供程序。让我们以下面的小部件作为图像类的示例。每当需要图像实例时就可以使用此小部件。现在我正在使用一个需要图像提供程序作为参数的小部件。如何构建自定义图像提供商？（我知道现有的 dart 包，但这里的问题是如何编写我自己的图像提供程序）

class _AppImageState extends State<AppImage> {
  Uint8List imageData;

  Future download({iterate = 0}) async {
    if (iterate >= 5) {
      Log.w("too many iterations for ${widget.url}");
      return;
    }

    var response;
    try {
      var request = await HttpClient().getUrl(Uri.parse(widget.url));
      response = await request.close();
    } catch (e) {
      Log.e(e);
      return Timer(Duration(seconds: iterate + 1), () => download(iterate: iterate + 1));
    }

    try {
      if (response != null && response.statusCode == 200) {
        Uint8List bytes = await consolidateHttpClientResponseBytes(response);
        setState(() {
          imageData = bytes;
        });
      } else {
        return Timer(Duration(seconds: iterate + 1), () => download(iterate: iterate + 1));
      }
    } catch (e) {
      Log.e(e);
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    download();
  }

  @override
  Widget build(BuildContext context) {
    return imageData != null ? Image.memory(imageData) : widget.placeholder ?? Container();
  }
}

Answer 1

我按照FileImage并编写了自己的 ImageProvider，我对此不太掌握，所以要小心它可能有问题（例如我不使用 gif 进行测试），您也可以阅读FileImage，它的代码比 少，NetworkImage并且很容易读。

class CacheImageProvider extends ImageProvider<CacheImageProvider> {
  final String fileId;//the cache id use to get cache

  CacheImageProvider(this.fileId);

  @override
  ImageStreamCompleter load(CacheImageProvider key, DecoderCallback decode) {
    return MultiFrameImageStreamCompleter(
      codec: _loadAsync(decode),
      scale: 1.0,
      debugLabel: fileId,
      informationCollector: () sync* {
        yield ErrorDescription('Path: $fileId');
      },
    );
  }

  Future<Codec> _loadAsync(DecoderCallback decode) async {
    // the DefaultCacheManager() encapsulation, it get cache from local storage.
    final Uint8List bytes = await (await CacheThumbnail.getThumbnail(fileId)).readAsBytes();

    if (bytes.lengthInBytes == 0) {
      // The file may become available later.
      PaintingBinding.instance?.imageCache?.evict(this);
      throw StateError('$fileId is empty and cannot be loaded as an image.');
    }

    return await decode(bytes);
  }

  @override
  Future<CacheImageProvider> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture<CacheImageProvider>(this);
  }
  
  //the custom == and hashCode must be write, because the ImageProvider memory cache use it to identify the same image.
  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType) return false;
    bool res = other is CacheImageProvider && other.fileId == fileId;
    return res;
  }

  @override
  int get hashCode => fileId.hashCode;

  @override
  String toString() => '${objectRuntimeType(this, 'CacheImageProvider')}("$fileId")';
}

并使用它：

Image(image: CacheImageProvider(_data[index].fileId))