Merge pull request #5 from CaiJingLong/loading_delegate

support custom loading widget delegate

update version 0.1.1

CHANGELOG.md

@@ -1,17 +1,25 @@
 # CHANGELOG
 
+## [0.1.1] fix bug and add params
+
+add loadingDelegate
+
 ## [0.1.0] support video
+
 API incompatibility
 
 ImageXXX rename AssetXXX
 
 ## [0.0.8] fix bug
+
 DefaultCheckBoxBuilderDelegate params checkColor not valid bug
 
 ## [0.0.7] fix bug
+
 fix dividerColor not valid bug
 
 ## [0.0.6] add checkbox delegate
+
 users can use CheckBoxDelegate to custom preview right bottom widget
 
 ## [0.0.5] add a params

README.md

@@ -3,7 +3,6 @@
 [![pub package](https://img.shields.io/pub/v/photo.svg)](https://pub.dartlang.org/packages/photo)
 ![Hex.pm](https://img.shields.io/hexpm/l/plug.svg)
 
-
 image picker, multi picker
 use flutter as ui
 
@@ -14,6 +13,7 @@ if you want to build custom ui, you just need api to make custom ui. to use [pho
 ![image](https://github.com/CaiJingLong/some_asset/blob/master/image_picker1.gif)
 
 ## API incompatibility
+
 API incompatibility
 
 because support video, so the ImagePathEntity and ImageEntity rename to AssetPathEntity and AssetEntity.
@@ -24,7 +24,7 @@ so PhotoPicker.pickImage return type will change to List<AssetEntity>
 
 ```yaml
 dependencies:
-  photo: ^0.1.0
+  photo: ^0.1.1
 ```
 
 ## import
@@ -37,43 +37,48 @@ import 'package:photo_manager/photo_manager.dart';
 ## use
 
 ```dart
-  void _pickImage() async {
+void _pickImage() async {
     List<AssetEntity> imgList = await PhotoPicker.pickImage(
-      context: context, // BuildContext requied
+      context: context,
+      // BuildContext requied
 
       /// The following are optional parameters.
-      themeColor: Colors.green, // the title color and bottom color
-      padding: 1.0, // item padding
-      dividerColor: Colors.deepOrange, // divider color
-      disableColor: Colors.grey.shade300, // the check box disable color
-      itemRadio: 0.88, // the content item radio
-      maxSelected: 8, // max picker image count
-      provider: I18nProvider.chinese, // i18n provider ,default is chinese. , you can custom I18nProvider or use ENProvider()
-      rowCount: 5,  // item row count
-      textColor: Colors.white, // text color
-      thumbSize: 150, // preview thumb size , default is 64
-      sortDelegate: SortDelegate.common, // default is common ,or you make custom delegate to sort your gallery
-      checkBoxBuilderDelegate: DefaultCheckBoxBuilderDelegate(), // default is DefaultCheckBoxBuilderDelegate ,or you make custom delegate to create checkbox
+      themeColor: Colors.green,
+      // the title color and bottom color
+      padding: 1.0,
+      // item padding
+      dividerColor: Colors.grey,
+      // divider color
+      disableColor: Colors.grey.shade300,
+      // the check box disable color
+      itemRadio: 0.88,
+      // the content item radio
+      maxSelected: 8,
+      // max picker image count
+      provider: I18nProvider.chinese,
+      // i18n provider ,default is chinese. , you can custom I18nProvider or use ENProvider()
+      rowCount: 5,
+      // item row count
+      textColor: Colors.white,
+      // text color
+      thumbSize: 150,
+      // preview thumb size , default is 64
+      sortDelegate: SortDelegate.common,
+      // default is common ,or you make custom delegate to sort your gallery
+      checkBoxBuilderDelegate: DefaultCheckBoxBuilderDelegate(
+        activeColor: Colors.white,
+        unselectedColor: Colors.white,
+      ), // default is DefaultCheckBoxBuilderDelegate ,or you make custom delegate to create checkbox
+
+      loadingDelegate:
+          this, // if you want to build custom loading widget,extends LoadingDelegate [see example/lib/main.dart]
     );
 
-    if (imgList == null) {
-      currentSelected = "not select item";
-    } else {
-      List<String> r = [];
-      for (var e in imgList) {
-        var file = await e.file;
-        r.add(file.absolute.path);
-      }
-      currentSelected = r.join("\n\n");
-    }
-    setState(() {});
-  }
-
 ```
 
 ## whole example
 
-you can see [github](https://github.com/caijinglong/flutter_photo/blob/master/example/)  [main.dart](https://github.com/caijinglong/flutter_photo/blob/master/example/lib/main.dart)
+you can see [github](https://github.com/caijinglong/flutter_photo/blob/master/example/) [main.dart](https://github.com/caijinglong/flutter_photo/blob/master/example/lib/main.dart)
 
 ## about android
 
@@ -104,12 +109,10 @@ if you use the proguard
 
 see the [github](https://github.com/bumptech/glide#proguard)
 
-
 ## about ios
 
 Because the album is a privacy privilege, you need user permission to access it. You must to modify the `Info.plist` file in Runner project.
 
-
 like next
 
 ```plist
@@ -118,4 +121,4 @@ like next
 ```
 
 xcode like image
-![in xcode](https://github.com/CaiJingLong/some_asset/blob/master/flutter_photo2.png)
+![in xcode](https://github.com/CaiJingLong/some_asset/blob/master/flutter_photo2.png)

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:photo/photo.dart';
 import 'package:photo_manager/photo_manager.dart';
@@ -26,32 +27,44 @@ class MyHomePage extends StatefulWidget {
   _MyHomePageState createState() => new _MyHomePageState();
 }
 
-class _MyHomePageState extends State<MyHomePage> {
+class _MyHomePageState extends State<MyHomePage> with LoadingDelegate {
   String currentSelected = "";
 
   void _pickImage() async {
     List<AssetEntity> imgList = await PhotoPicker.pickImage(
-      context: context, // BuildContext requied
+      context: context,
+      // BuildContext requied
 
       /// The following are optional parameters.
-      themeColor: Colors.green, // the title color and bottom color
-      padding: 1.0, // item padding
-      dividerColor: Colors.grey, // divider color
-      disableColor: Colors.grey.shade300, // the check box disable color
-      itemRadio: 0.88, // the content item radio
-      maxSelected: 8, // max picker image count
-      provider: I18nProvider
-          .chinese, // i18n provider ,default is chinese. , you can custom I18nProvider or use ENProvider()
-      rowCount: 5, // item row count
-      textColor: Colors.white, // text color
-      thumbSize: 150, // preview thumb size , default is 64
-      sortDelegate: SortDelegate
-          .common, // default is common ,or you make custom delegate to sort your gallery
-      checkBoxBuilderDelegate:
-          DefaultCheckBoxBuilderDelegate(
-            activeColor: Colors.white,
-            unselectedColor: Colors.white,
-          ), // default is DefaultCheckBoxBuilderDelegate ,or you make custom delegate to create checkbox
+      themeColor: Colors.green,
+      // the title color and bottom color
+      padding: 1.0,
+      // item padding
+      dividerColor: Colors.grey,
+      // divider color
+      disableColor: Colors.grey.shade300,
+      // the check box disable color
+      itemRadio: 0.88,
+      // the content item radio
+      maxSelected: 8,
+      // max picker image count
+      provider: I18nProvider.chinese,
+      // i18n provider ,default is chinese. , you can custom I18nProvider or use ENProvider()
+      rowCount: 5,
+      // item row count
+      textColor: Colors.white,
+      // text color
+      thumbSize: 150,
+      // preview thumb size , default is 64
+      sortDelegate: SortDelegate.common,
+      // default is common ,or you make custom delegate to sort your gallery
+      checkBoxBuilderDelegate: DefaultCheckBoxBuilderDelegate(
+        activeColor: Colors.white,
+        unselectedColor: Colors.white,
+      ), // default is DefaultCheckBoxBuilderDelegate ,or you make custom delegate to create checkbox
+
+      loadingDelegate:
+          this, // if you want to build custom loading widget,extends LoadingDelegate, [see example/lib/main.dart]
     );
 
     if (imgList == null) {
@@ -67,6 +80,34 @@ class _MyHomePageState extends State<MyHomePage> {
     setState(() {});
   }
 
+  @override
+  Widget buildBigImageLoading(
+      BuildContext context, AssetEntity entity, Color themeColor) {
+    return Center(
+      child: Container(
+        width: 50.0,
+        height: 50.0,
+        child: CupertinoActivityIndicator(
+          radius: 25.0,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget buildPreviewLoading(
+      BuildContext context, AssetEntity entity, Color themeColor) {
+    return Center(
+      child: Container(
+        width: 50.0,
+        height: 50.0,
+        child: CupertinoActivityIndicator(
+          radius: 25.0,
+        ),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return new Scaffold(

example/test/widget_test.dart

@@ -7,7 +7,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
-import 'package:example/main.dart';
+import '../lib/main.dart';
 
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {

lib/photo.dart

@@ -3,19 +3,20 @@ library photo;
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:photo_manager/photo_manager.dart';
-
+import 'package:photo/src/delegate/checkbox_builder_delegate.dart';
+import 'package:photo/src/delegate/loading_delegate.dart';
+import 'package:photo/src/delegate/sort_delegate.dart';
 import 'package:photo/src/entity/options.dart';
 import 'package:photo/src/provider/i18n_provider.dart';
 import 'package:photo/src/ui/dialog/not_permission_dialog.dart';
 import 'package:photo/src/ui/photo_app.dart';
-import 'package:photo/src/delegate/sort_delegate.dart';
-import 'package:photo/src/delegate/checkbox_builder_delegate.dart';
+import 'package:photo_manager/photo_manager.dart';
 
+export 'package:photo/src/delegate/checkbox_builder_delegate.dart';
+export 'package:photo/src/delegate/loading_delegate.dart';
+export 'package:photo/src/delegate/sort_delegate.dart';
 export 'package:photo/src/provider/i18n_provider.dart'
     show I18NCustomProvider, I18nProvider, CNProvider, ENProvider;
-export 'package:photo/src/delegate/sort_delegate.dart';
-export 'package:photo/src/delegate/checkbox_builder_delegate.dart';
 
 class PhotoPicker {
   static PhotoPicker _instance;
@@ -61,6 +62,7 @@ class PhotoPicker {
     I18nProvider provider = I18nProvider.chinese,
     SortDelegate sortDelegate,
     CheckBoxBuilderDelegate checkBoxBuilderDelegate,
+    LoadingDelegate loadingDelegate,
   }) {
     assert(provider != null, "provider must be not null");
     assert(context != null, "context must be not null");
@@ -73,6 +75,8 @@ class PhotoPicker {
     sortDelegate ??= SortDelegate.common;
     checkBoxBuilderDelegate ??= DefaultCheckBoxBuilderDelegate();
 
+    loadingDelegate ??= DefaultLoadingDelegate();
+
     var options = Options(
       rowCount: rowCount,
       dividerColor: dividerColor,
@@ -85,6 +89,7 @@ class PhotoPicker {
       thumbSize: thumbSize,
       sortDelegate: sortDelegate,
       checkBoxBuilderDelegate: checkBoxBuilderDelegate,
+      loadingDelegate: loadingDelegate,
     );
 
     return PhotoPicker()._pickImage(

lib/src/delegate/loading_delegate.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+abstract class LoadingDelegate {
+  Widget buildBigImageLoading(
+      BuildContext context, AssetEntity entity, Color themeColor);
+
+  Widget buildPreviewLoading(
+      BuildContext context, AssetEntity entity, Color themeColor);
+}
+
+class DefaultLoadingDelegate extends LoadingDelegate {
+  @override
+  Widget buildBigImageLoading(
+      BuildContext context, AssetEntity entity, Color themeColor) {
+    return Center(
+      child: Container(
+        width: 30.0,
+        height: 30.0,
+        child: CircularProgressIndicator(
+          valueColor: AlwaysStoppedAnimation(themeColor),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget buildPreviewLoading(
+      BuildContext context, AssetEntity entity, Color themeColor) {
+    return Center(
+      child: Container(
+        width: 30.0,
+        height: 30.0,
+        child: CircularProgressIndicator(
+          valueColor: AlwaysStoppedAnimation(themeColor),
+        ),
+      ),
+    );
+  }
+}

lib/src/entity/options.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:photo/src/delegate/checkbox_builder_delegate.dart';
+import 'package:photo/src/delegate/loading_delegate.dart';
 import 'package:photo/src/delegate/sort_delegate.dart';
 
 class Options {
@@ -25,6 +26,8 @@ class Options {
 
   final CheckBoxBuilderDelegate checkBoxBuilderDelegate;
 
+  final LoadingDelegate loadingDelegate;
+
   const Options({
     this.rowCount,
     this.maxSelected,
@@ -37,5 +40,6 @@ class Options {
     this.thumbSize,
     this.sortDelegate,
     this.checkBoxBuilderDelegate,
+    this.loadingDelegate,
   });
 }

lib/src/ui/page/photo_main_page.dart

@@ -1,6 +1,7 @@
 import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
+import 'package:photo/src/delegate/loading_delegate.dart';
 import 'package:photo/src/engine/lru_cache.dart';
 import 'package:photo/src/entity/options.dart';
 import 'package:photo/src/provider/config_provider.dart';
@@ -197,6 +198,7 @@ class _PhotoMainPageState extends State<PhotoMainPage>
             entity: data,
             themeColor: themeColor,
             size: options.thumbSize,
+            loadingDelegate: options.loadingDelegate,
           ),
           _buildMask(containsEntity(data)),
           _buildSelected(data),
@@ -487,11 +489,14 @@ class ImageItem extends StatelessWidget {
 
   final int size;
 
+  final LoadingDelegate loadingDelegate;
+
   const ImageItem({
     Key key,
     this.entity,
     this.themeColor,
     this.size = 64,
+    this.loadingDelegate,
   }) : super(key: key);
 
   @override
@@ -511,13 +516,8 @@ class ImageItem extends StatelessWidget {
           return _buildImageItem(futureData);
         }
         return Center(
-          child: Container(
-            width: 20.0,
-            height: 20.0,
-            child: CircularProgressIndicator(
-              valueColor: AlwaysStoppedAnimation(themeColor),
-            ),
-          ),
+          child:
+              loadingDelegate.buildPreviewLoading(context, entity, themeColor),
         );
       },
     );

lib/src/ui/page/photo_preview_page.dart

@@ -238,9 +238,15 @@ class _PhotoPreviewPageState extends State<PhotoPreviewPage> {
     var data = list[index];
     return BigPhotoImage(
       assetEntity: data,
+      loadingWidget: _buildLoadingWidget(data),
     );
   }
 
+  Widget _buildLoadingWidget(AssetEntity entity) {
+    return options.loadingDelegate
+        .buildBigImageLoading(context, entity, themeColor);
+  }
+
   void _onPageChanged(int value) {
     pageChangeController.add(value);
   }
@@ -271,6 +277,7 @@ class _PhotoPreviewPageState extends State<PhotoPreviewPage> {
               themeColor: themeColor,
               entity: item,
               size: options.thumbSize,
+              loadingDelegate: options.loadingDelegate,
             ),
             IgnorePointer(
               child: StreamBuilder(
@@ -317,8 +324,7 @@ class BigPhotoImage extends StatefulWidget {
 
 class _BigPhotoImageState extends State<BigPhotoImage>
     with AutomaticKeepAliveClientMixin {
-
-  Widget get loadingWidget{
+  Widget get loadingWidget {
     return widget.loadingWidget ?? Container();
   }
 

pubspec.lock

@@ -213,7 +213,7 @@ packages:
       name: photo_manager
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "0.1.0"
+    version: "0.1.2"
   plugin:
     dependency: transitive
     description:

pubspec.yaml

@@ -1,6 +1,6 @@
 name: photo
 description: image picker, multi picker,use flutter as ui, if you want to build custom ui,you just use photo_manager.
-version: 0.1.0
+version: 0.1.1
 author: caijinglong<cjl_spy@163.com>
 homepage: https://github.com/CaiJingLong/flutter_photo
 
@@ -11,7 +11,7 @@ dependencies:
   flutter:
     sdk: flutter
 
-  photo_manager: ^0.1.0
+  photo_manager: ^0.1.2
 #  photo_manager:
 #    git:
 #      url: https://github.com/CaiJingLong/flutter_photo_manager.git

test/photo_test.dart

@@ -1,5 +1,5 @@
-import 'package:test/test.dart';
+//import 'package:test/test.dart';
 
 void main() {
-  test('adds one to input values', () {});
+//  test('adds one to input values', () {});
 }