Flutter 什麼功能都有的Image

時間 2019-11-05

標籤 flutter 什麼功能都有 image 简体版

原文原文鏈接

extended_image 相關文章git

Pub上面關於Image的插件挺多的，可是爲啥我仍是想要作一個呢，主要是感受pub上的不夠自定義化。 github

extended_image跟官方的用法如出一轍，可是增長了許多實用的功能。canvas

緩存網絡圖片

ExtendedNetworkImageProvider除了緩存的功能還提供了重試，超時等功能api

ExtendedNetworkImageProvider(this.url,
      {this.scale = 1.0,
      this.headers,
      this.cache: false,
      this.retries = 3,
      this.timeLimit,
      this.timeRetry = const Duration(milliseconds: 100)})
      : assert(url != null),
        assert(scale != null);

  ///time Limit to request image
  final Duration timeLimit;

  ///the time to retry to request
  final int retries;

  ///the time duration to retry to request
  final Duration timeRetry;

  ///whether cache image to local
  final bool cache;

  /// The URL from which the image will be fetched.
  final String url;

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

  /// The HTTP headers that will be used with [HttpClient.get] to fetch image from network.
  final Map<String, String> headers;  
複製代碼

或者你也能夠這樣用緩存

ExtendedImage.network(
                url,
                cache: true,
              ),
複製代碼

圓角，邊框，圓形

ExtendedImage.network(
                url,
                width: ScreenUtil.instance.setWidth(400),
                height: ScreenUtil.instance.setWidth(400),
                fit: BoxFit.fill,
                cache: true,
                border: Border.all(color: Colors.red, width: 1.0),
                shape: boxShape,
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
複製代碼

清除本地緩存，清除內存緩存，保存網絡圖片到相冊

清除本地緩存，你能夠選擇清楚所有，也能夠給一個時間（清除好比7天以前的）微信

// Clear the disk cache directory then return if it succeed.
/// <param name="duration">timespan to compute whether file has expired or not</param>
Future<bool> clearDiskCachedImages({Duration duration}) 
複製代碼

清除內存緩存，這個是方便你們使用，調用的是系統apimarkdown

///clear all of image in memory
 clearMemoryImageCache();

/// get ImageCache
 getMemoryImageCache() ;
複製代碼

保存圖片到相冊,使用到了image_picker_saver庫，不一樣的是，支持把緩存到本地的圖片直接保存到相冊網絡

saveNetworkImageToPhoto(String url, {bool useCache: true})
複製代碼

提供了回調 LoadStateChanged 方便根據狀態訂製加載，顯示，失敗等效果

這個功能不單單給網絡圖片使用，若是你讀取的圖片比較大，花費時間比較久，你依然能夠用來定製加載效果編輯器

ExtendedImage.network(
                  url,
                  width: ScreenUtil.instance.setWidth(600),
                  height: ScreenUtil.instance.setWidth(400),
                  fit: BoxFit.fill,
                  cache: true,
                  loadStateChanged: (ExtendedImageState state) {
                    switch (state.extendedImageLoadState) {
                      case LoadState.loading:
                        _controller.reset();
                        return Image.asset(
                          "assets/loading.gif",
                          fit: BoxFit.fill,
                        );
                        break;
                      case LoadState.completed:
                        _controller.forward();
                        return FadeTransition(
                          opacity: _controller,
                          child: ExtendedRawImage(
                            image: state.extendedImageInfo?.image,
                            width: ScreenUtil.instance.setWidth(600),
                            height: ScreenUtil.instance.setWidth(400),
                          ),
                        );
                        break;
                      case LoadState.failed:
                        _controller.reset();
                        return GestureDetector(
                          child: Stack(
                            fit: StackFit.expand,
                            children: <Widget>[
                              Image.asset(
                                "assets/failed.jpg",
                                fit: BoxFit.fill,
                              ),
                              Positioned(
                                bottom: 0.0,
                                left: 0.0,
                                right: 0.0,
                                child: Text(
                                  "load image failed, click to reload",
                                  textAlign: TextAlign.center,
                                ),
                              )
                            ],
                          ),
                          onTap: () {
                            state.reLoadImage();
                          },
                        );
                        break;
                    }
                  },
                )
複製代碼

提供裁剪圖片的方法

相信刷過微博的小夥伴都知道，微博裏面的圖片，是會根據圖片的尺寸進行預覽顯示的，效果以下ide

實現方法很簡單，在LoadStateChanged 圖片加載完成的狀態中，你能拿到圖片的image，獲得圖片的寬高，這個時候你就能夠根據本身的設計計算出須要顯示的圖片的區域soucreRect

ExtendedRawImage(
        image: image,
        width: num400,
        height: num300,
        fit: BoxFit.fill,
        soucreRect: Rect.fromLTWH(
            (image.width - width) / 2.0, 0.0, width, image.height.toDouble()),
      )
複製代碼

裁剪圖片demo

提供了2個時機，你能夠在繪畫圖片前和後，作你想作的任何事情

BeforePaintImage 在繪畫圖片以前，若是你返回了true，那麼自身的圖片將不會繪製 AfterPaintImage 在繪畫圖片以後

在Demo中，主要展現瞭如何

1.將圖片剪切成一個心

2.在圖片之上繪畫出一個心（製做你的水印有木有）

3.製做了一個下拉刷的圖片,使用在裏前一個裁剪圖片的demo裏面

ExtendedImage.network(
                url,
                width: ScreenUtil.instance.setWidth(400),
                height: ScreenUtil.instance.setWidth(400),
                fit: BoxFit.fill,
                cache: true,
                beforePaintImage: (Canvas canvas, Rect rect, ui.Image image) {
                  if (paintType == PaintType.ClipHeart) {
                    if (!rect.isEmpty) {
                      canvas.save();
                      canvas.clipPath(clipheart(rect, canvas));
                    }
                  }
                  return false;
                },
                afterPaintImage: (Canvas canvas, Rect rect, ui.Image image) {
                  if (paintType == PaintType.ClipHeart) {
                    if (!rect.isEmpty) canvas.restore();
                  } else if (paintType == PaintType.PaintHeart) {
                    canvas.drawPath(
                        clipheart(rect, canvas),
                        Paint()
                          ..colorFilter = ColorFilter.mode(
                              Color(0x55ea5504), BlendMode.srcIn)
                          ..isAntiAlias = false
                          ..filterQuality = FilterQuality.low);
                  }
                },
              )
複製代碼