大家好华糖，我是戴著口罩眼鏡會起霧的200瘟裸。不得不說Flutter在UI方面，只要是能想到的效果兼搏，你用心都能實現(xiàn)沙郭。

圖片是一個應(yīng)用中的重要部分，展示吓著，壓縮送挑，裁剪，pub三方庫應(yīng)該說是應(yīng)有盡有让虐。
FlutterCandies 中也有多個關(guān)于圖片的庫,可以說是比較全面了罢荡。

extended_image

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

主要功能

• 緩存網(wǎng)絡(luò)圖片
• 加載狀態(tài)(正在加載惭缰，完成，失敗)
• 拖拽縮放圖片
• 圖片編輯(裁剪络凿，旋轉(zhuǎn)昂羡，翻轉(zhuǎn))
• 圖片預(yù)覽(跟微信掘金一樣)
• 滑動退出效果(跟微信掘金一樣)
• 設(shè)置圓角，邊框
• 支持進度顯示
• 圖片預(yù)覽上滑顯示詳情(跟圖蟲一樣)

支持進度顯示

image

增加loadingProgress參數(shù)怨愤，用于顯示進度蛹批。

             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;
              },
            ),

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

image

當時在制作圖片預(yù)覽功能的時候差导，就暴露多了足夠的api猪勇，提供給用戶自定義各種效果，
由于Flutter手勢的復(fù)雜以及沖突埠对，我特意做了一個Demo提供出來。

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

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

extended_image_library

為extended_image的基礎(chǔ)庫貌笨，如果你只需要網(wǎng)絡(luò)圖片緩存功能襟沮，你可以只引用這個庫

    Image(
      image: ExtendedNetworkImageProvider("", cache: true),
    );

• 支持Web，小姐姐在線Demo
• 提供獲取緩存圖片的各種方法
• 方便獲取圖片的原數(shù)據(jù)(image的toByteData方法性能不佳)

flutter_image_editor

image

flutter_image_editor可以說是低調(diào)為extended_image量身打造的原生插件膀跌，支持旋轉(zhuǎn)裁剪翻轉(zhuǎn)固灵，extended_image負責圖片編輯UI，flutter_image_editor提供原生裁剪圖片數(shù)據(jù)能力丛忆。由于dart image庫在處理圖片的效率問題，原生庫(期待純C++庫)就有了很大的優(yōu)勢(大圖片可以有10倍速度的提升)可很。

flutter_wechat_assets_picker

出自Flutter勸退師Alex之手凰浮，
是一個對標微信的多選資源選擇器，99%接近于原生微信的操作袜茧，純Dart編寫，支持選擇的同時也支持預(yù)覽資源尘惧。支持如下功能：

• 圖片資源支持
• 視頻資源支持
• 國際化支持
• 自定義文本支持

原文章

結(jié)語

如果覺得還差點意思递递，歡迎提建議，歡迎pr贰逾。

歡迎加入Flutter Candies菠秒，一起生產(chǎn)可愛的Flutter 小糖果(QQ群:181398081)

最最后放上Flutter Candies全家桶，真香践叠。

image