Merge pull request #2 from LeGoffMael/theme

change: improve theme use and doc
LeGoffMael · Jan 13, 2023 · fdb05a2 · fdb05a2
2 parents dadf94e + e0af116
commit fdb05a2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -27,29 +27,29 @@ package to handle the picker and a custom version of [image_crop](https://pub.de
 
 ## 📖 Installation
 
-Since this package is a custom delegate of [flutter_wechat_assets_picker](https://pub.dev/packages/wechat_assets_picker) you must follow this package setup recommandation : [installation guide](https://pub.dev/packages/wechat_assets_picker#preparing-for-use-).
+Since this package is a custom delegate of [flutter_wechat_assets_picker](https://pub.dev/packages/wechat_assets_picker) you must follow this package setup recommendation : [installation guide](https://pub.dev/packages/wechat_assets_picker#preparing-for-use-).
 
 ## 👀 Usage
 
 For more details check out the [example](https://github.com/LeGoffMael/insta_assets_picker/blob/main/example/lib/main.dart).
 
 ```dart
-Future<void> callPicker() => InstaAssetPicker.pickAssets(
-        context,
-        title: 'Select images',
-        maxAssets: 10,
-        onCompleted: (Stream<InstaAssetsExportDetails> stream) {
-            // TODO : handle crop stream result
-            // i.e : display it using a StreamBuilder
-            // - in the same page (closeOnComplete=true)
-            // - send it to another page (closeOnComplete=false)
-            // or use `stream.listen` to handle the data manually in your state manager
-            // - ...
-        },
-    );
+Future<List<AssetEntity>?> callPicker() => InstaAssetPicker.pickAssets(
+    context,
+    title: 'Select images',
+    maxAssets: 10,
+    onCompleted: (Stream<InstaAssetsExportDetails> stream) {
+        // TODO : handle crop stream result
+        // i.e : display it using a StreamBuilder
+        // - in the same page (closeOnComplete=true)
+        // - send it to another page (closeOnComplete=false)
+        // or use `stream.listen` to handle the data manually in your state manager
+        // - ...
+    },
+);
 ```
 
-Fields in `InstaAssetsExportDetails`:
+- Fields in `InstaAssetsExportDetails`:
 
 | Name           | Type                | Description                                             |
 | -------------- | ------------------- | ------------------------------------------------------- |
@@ -58,9 +58,42 @@ Fields in `InstaAssetsExportDetails`:
 | aspectRatio    | `double`            | Selected aspect ratio (1 or 4/5)                        |
 | progress       | `double`            | Progress indicator of the exportation (between 0 and 1) |
 
-Regarding picker configuration : [AssetPickerConfig](https://pub.dev/packages/wechat_assets_picker#usage-)
 
-Regarding `textDelegate` : [Localizations](https://pub.dev/packages/wechat_assets_picker#localizations)
+### Picker configuration
+
+Please follow `flutter_wechat_assets_picker` documentation : [AssetPickerConfig](https://pub.dev/packages/wechat_assets_picker#usage-)
+
+### Localizations
+
+Please follow `flutter_wechat_assets_picker` documentation : [Localizations](https://pub.dev/packages/wechat_assets_picker#localizations)
+
+### Theme customization
+
+Most of the components of the picker can be customized using theme.
+
+```dart
+// set picker theme based on app theme primary color
+final theme = AssetPicker.themeData(Theme.of(context).primaryColor);
+InstaAssetPicker.pickAssets(
+    context,
+    title: 'Select images',
+    pickerTheme: theme.copyWith(
+      canvasColor: Colors.black, // change body background color
+      splashColor: Color.grey, // change on tap splash color
+      colorScheme: theme.colorScheme.copyWith(
+        background: Colors.black87, // change albums list background color
+      ),
+      appBarTheme: theme.appBarTheme.copyWith(
+        backgroundColor: Colors.black, // change app bar background color
+        titleTextStyle: Theme.of(context)
+            .appBarTheme
+            .titleTextStyle
+            ?.copyWith(color: Colors.white), // change app bar title text style to be like app theme
+      ),
+    ),
+    onCompleted: (_) {},
+);
+```
 
 ## ✨ Credit
 

diff --git a/lib/src/widget/crop_viewer.dart b/lib/src/widget/crop_viewer.dart
@@ -105,7 +105,7 @@ class CropViewerState extends State<CropViewer> {
           maximumScale: 10,
           aspectRatio: widget.controller.aspectRatio,
           disableResize: true,
-          backgroundColor: widget.theme!.cardColor,
+          backgroundColor: widget.theme!.canvasColor,
           initialParam: cropParam,
         ),
       );

diff --git a/lib/src/widget/insta_asset_picker_delegate.dart b/lib/src/widget/insta_asset_picker_delegate.dart
@@ -280,10 +280,7 @@ class InstaAssetPickerBuilder extends DefaultAssetPickerBuilderDelegate {
                       isPermissionLimited && p.path.isAll
                           ? textDelegate.accessiblePathName
                           : p.path.name,
-                      style: Theme.of(context)
-                          .textTheme
-                          .bodyLarge
-                          ?.copyWith(fontSize: 16),
+                      style: theme.textTheme.bodyLarge?.copyWith(fontSize: 16),
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
                     ),
@@ -421,10 +418,11 @@ class InstaAssetPickerBuilder extends DefaultAssetPickerBuilderDelegate {
                     height: topWidgetHeight,
                     child: AssetPickerAppBarWrapper(
                       appBar: AssetPickerAppBar(
+                        backgroundColor: theme.appBarTheme.backgroundColor,
                         title: title != null
                             ? Text(
                                 title!,
-                                style: Theme.of(context).textTheme.titleLarge,
+                                style: theme.appBarTheme.titleTextStyle,
                               )
                             : null,
                         leading: backButton(context),