Flutter开发之为svg开发ImageProvider

最近使用 flutter_svg 这个 package 加载 svg 图片：
https://github.com/dnfield/flutter_svg.git

一开始的使用还算顺利，直到遇到了一个需求，需要设置 Container 的 DecorationImage，但是 DecorationImage 的 image 参数需要一个 ImageProvider:

/// The image to be painted into the decoration.
///
/// Typically this will be an [AssetImage] (for an image shipped with the
/// application) or a [NetworkImage] (for an image obtained from the network).
final ImageProvider image;

使用正常图片是没有问题的，但是如果能支持svg 的话岂不是很美，所以研究了一下 fluter_svg 这个 package，发现并没有提供相关的方法来调用，而且网上也没有相关的实现，那就只能自己动手，丰衣足食了。
先看看 ImageProvider 是个什么东东：

abstract class ImageProvider<T>

是个 abstract class ，似乎是个不错的信号，这意味着只要 extends ImageProvide 就可以作为参数传递进去了。那就先看看 Image 这个 Widget 是怎么实现的吧：

Image.memory(
    Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : image = MemoryImage(bytes, scale: scale),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

这个是 Image 其中一个构造函数，其中把 MemoryImage 赋值给了 image 这个参数，嗯，看看 这个 MemoryImage 是个什么东东吧：

/// Decodes the given [Uint8List] buffer as an image, associating it with the
/// given scale.
///
/// The provided [bytes] buffer should not be changed after it is provided
/// to a [MemoryImage]. To provide an [ImageStream] that represents an image
/// that changes over time, consider creating a new subclass of [ImageProvider]
/// whose [load] method returns a subclass of [ImageStreamCompleter] that can
/// handle providing multiple images.
///
/// See also:
///
///  * [Image.memory] for a shorthand of an [Image] widget backed by [MemoryImage].
class MemoryImage extends ImageProvider<MemoryImage> {
  /// Creates an object that decodes a [Uint8List] buffer as an image.
  ///
  /// The arguments must not be null.
  const MemoryImage(this.bytes, { this.scale = 1.0 })
    : assert(bytes != null),
      assert(scale != null);

  /// The bytes to decode into an image.
  final Uint8List bytes;

  /// The scale to place in the [ImageInfo] object of the image.
  final double scale;

  @override
  Future<MemoryImage> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture<MemoryImage>(this);
  }

  @override
  ImageStreamCompleter load(MemoryImage key) {
    return MultiFrameImageStreamCompleter(
      codec: _loadAsync(key),
      scale: key.scale,
    );
  }

  Future<ui.Codec> _loadAsync(MemoryImage key) {
    assert(key == this);

    return PaintingBinding.instance.instantiateImageCodec(bytes);
  }

  @override
  bool operator ==(dynamic other) {
    if (other.runtimeType != runtimeType)
      return false;
    final MemoryImage typedOther = other;
    return bytes == typedOther.bytes
        && scale == typedOther.scale;
  }

  @override
  int get hashCode => hashValues(bytes.hashCode, scale);

  @override
  String toString() => '$runtimeType(${describeIdentity(bytes)}, scale: $scale)';
}

哎呦不错哦，果然是 extends 的 ImageProvider，哈哈，那我们就按照这个仿造一个我们自己的 ImageProvider吧：

class Svg extends ImageProvider<Svg> {
  const Svg(this.asset, {this.scale = 1.0})
      : assert(asset != null),
        assert(scale != null);

  final double scale;

  /// 因为希望可以从 asset 直接创建一个 svg 的 ImageProvider
  /// 所以将其中一个参数定义未 asset path;
  final String asset;

  @override
  Future<Svg> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture<Svg>(this);
  }

  @override
  ImageStreamCompleter load(Svg key) {
    return MultiFrameImageStreamCompleter(
      codec: _loadAsync(key),
      scale: key.scale,
    );
  }

  Future<ui.Codec> _loadAsync(Svg key) {
    assert(key == this);

    /// 先在的问题就变成了怎么将一个 svg 的 asset path
    /// 转变成为 bytes, 这里的 bytes 是一个 uint8list
    return PaintingBinding.instance
        .instantiateImageCodec(bytes);
  }

  @override
  bool operator ==(dynamic other) {
    if (other.runtimeType != runtimeType) return false;
    final Svg typedOther = other;
    return asset == typedOther.asset && scale == typedOther.scale;
  }

  @override
  int get hashCode => hashValues(asset.hashCode, scale);

  @override
  String toString() =>
      '$runtimeType(${describeIdentity(asset)}, scale: $scale)';
}

像注释里面说的，现在的问题变成了怎么将 svg asset 变成一个 uint8list ，貌似这个需要从 flutter_svg 这个 package 寻找答案了，看了下文档，果然不负众望：

import 'package:flutter_svg/flutter_svg.dart';
final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use
final Picture picture = svgRoot.toPicture();
 这个 Picture 又是个啥呢？是 dart:ui 里面的一个对象，看看它可以做什么:
/// Creates an image from this picture.
  ///
  /// The picture is rasterized using the number of pixels specified by the
  /// given width and height.
  ///
  /// Although the image is returned synchronously, the picture is actually
  /// rasterized the first time the image is drawn and then cached.
  Future<Image> toImage(int width, int height) {
    if (width <= 0 || height <= 0)
      throw new Exception('Invalid image dimensions.');
    return _futurize(
      (_Callback<Image> callback) => _toImage(width, height, callback)
    );
  }

这个似乎可以转变成一个 Image 这个 Image 是 dart:ui 的对象，继续看看它能做什么：

/// Converts the [Image] object into a byte array.
///
/// The [format] argument specifies the format in which the bytes will be
/// returned.
///
/// Returns a future that completes with the binary image data or an error
/// if encoding fails.
Future<ByteData> toByteData({ImageByteFormat format: ImageByteFormat.rawRgba}) {
  return _futurize((_Callback<ByteData> callback) {
    return _toByteData(format.index, (Uint8List encoded) {
      callback(encoded?.buffer?.asByteData());
    });
  });
}

完美，所以思路很明朗了:
1，读取 svg 的内容；
2，调用 flutter_svg 提供的方法转变为 Picture；
3，将 Picture 转为 Image；
4，通过 Image 获取 ByteData；
5，将 ByteData 转为 Uint8List；
_loadAsync 就可以实现了：

Future<ui.Codec> _loadAsync(AssetSvg key) async {
    assert(key == this);

    var rawSvg = await rootBundle.loadString(asset);
    final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
    final ui.Picture picture = svgRoot.toPicture(
      size: Size(
        width.toDouble(),
        height.toDouble(),
      ),
      clipToViewBox: false,
    );
    final ui.Image image = await picture.toImage(width, height);
    var imageData = await image.toByteData(format: ui.ImageByteFormat.png);

    return PaintingBinding.instance
        .instantiateImageCodec(imageData.buffer.asUint8List());
  }

这样终于就可以实现我们想要的效果了：

Image(image:Svg('xxx.svg'));
DecorationImage(image:Svg('xxx.svg'));

完整代码可以查看

https://github.com/yang-f/flutter_svg_provider

现在因为知道怎么实现去复盘思路，看起来还好，实际颇费了些周折，应该是可以帮到有这样需求的人，免得再像我似的苦逼哈哈的研读源码，就这么多了。

赏

谢谢你请我吃糖果

微信