Flutter 圖片全家桶

大家好，我是戴著眼鏡口罩會起霧的200。不得不說Flutter在UI方面，只要是能想到的效果，你用心都能實現。

圖片是一個應用中的重要部分，展示，壓縮，裁剪，pub三方庫應該說是應有盡有。 FlutterCandies 中也有多個關於圖片的庫,可以說是比較全面了。

extended_image

功能最全面的圖片展示庫，加粗為最近新增功能

主要功能

快取網路圖片
載入狀態(正在載入，完成，失敗)
拖拽縮放圖片
圖片編輯(裁剪，旋轉，翻轉)
圖片預覽(跟微信掘金一樣)
滑動退出效果(跟微信掘金一樣)
設定圓角，邊框
支援進度顯示
圖片預覽上滑顯示詳情(跟圖蟲一樣)

支援進度顯示

增加loadingProgress引數，用於顯示進度。

             ExtendedImage.network(
              'https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/extended_text/special_text.jpg',
              handleLoadingProgress: true,
              clearMemoryCacheIfFailed: true,
              clearMemoryCacheWhenDispose: true,
              cache: false,
              loadStateChanged: (ExtendedImageState state) {
                if (state.extendedImageLoadState == LoadState.loading) {
                  final loadingProgress = state.loadingProgress;
                  final progress = loadingProgress?.expectedTotalBytes != null
                      ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes
                      : null;
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        SizedBox(
                          width: 150.0,
                          child: LinearProgressIndicator(
                            value: progress,
                          ),
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Text('${((progress ?? 0.0) * 100).toInt()}%'),
                      ],
                    ),
                  );
                }
                return null;
              },
            ),
複製程式碼

圖片預覽上滑顯示詳情(跟圖蟲一樣)

當時在製作圖片預覽功能的時候，就暴露多了足夠的api，提供給使用者自定義各種效果，由於Flutter手勢的複雜以及衝突，我特意做了一個Demo提供出來。

至此pic_swiper.dart已擁有以下功能:

縮放
平移
上下一頁圖片
拖動退出預覽
上滑顯示詳情

extended_image_library

為extended_image的基礎庫，如果你只需要網路圖片快取功能，你可以只引用這個庫

    Image(
      image: ExtendedNetworkImageProvider("", cache: true),
    );
複製程式碼

支援Web，小姐姐線上Demo
提供獲取快取圖片的各種方法
方便獲取圖片的原資料(image的toByteData方法效能不佳)

flutter_image_editor

flutter_image_editor可以說是低調為extended_image量身打造的原生外掛，支援旋轉裁剪翻轉，extended_image負責圖片編輯UI，flutter_image_editor提供原生裁剪圖片資料能力。由於dart image庫在處理圖片的效率問題，原生庫(期待純C++庫)就有了很大的優勢(大圖片可以有10倍速度的提升)。