Add custom handling of GiphyGif result of selector

example/pubspec.lock

@@ -121,7 +121,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.0.0"
+    version: "1.0.1"
   http:
     dependency: transitive
     description:
@@ -292,7 +292,7 @@ packages:
       name: url_launcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.1.5"
+    version: "6.1.6"
   url_launcher_android:
     dependency: transitive
     description:

lib/src/widgets/config.dart

@@ -1,5 +1,9 @@
 import 'package:flutter/widgets.dart';
 
+import '../client/client.dart';
+
+typedef OnSelectGiphyItem = void Function(GiphyGif);
+
 class GiphySelectorConfig extends InheritedWidget {
   static GiphySelectorConfig of(BuildContext context) =>
       context.findAncestorWidgetOfExactType<GiphySelectorConfig>()!;
@@ -10,12 +14,14 @@ class GiphySelectorConfig extends InheritedWidget {
       required this.randomID,
       required this.rating,
       required this.language,
+      this.onSelectGiphyItem,
       required super.child});
 
   final String apiKey;
   final String randomID;
   final String rating;
   final String language;
+  final OnSelectGiphyItem? onSelectGiphyItem;
 
   @override
   bool updateShouldNotify(covariant GiphySelectorConfig oldWidget) =>

lib/src/widgets/sheet.dart

@@ -12,19 +12,21 @@ class GiphySelectorSheet extends StatefulWidget {
   const GiphySelectorSheet(
       {Key? key,
       required this.apiKey,
-      this.tabColor,
+      this.onSelectGiphyItem,
       this.searchText,
       this.rating = GiphyRating.g,
       this.lang = GiphyLanguage.english,
-      this.randomID = ''})
+      this.randomID = '',
+      this.tabColor})
       : super(key: key);
 
   final String apiKey;
-  final Color? tabColor;
+  final OnSelectGiphyItem? onSelectGiphyItem;
   final String? searchText;
   final String rating;
   final String lang;
   final String randomID;
+  final Color? tabColor;
 
   @override
   State<GiphySelectorSheet> createState() => GiphySelectorSheetState();
@@ -76,6 +78,7 @@ class GiphySelectorSheetState extends State<GiphySelectorSheet>
       randomID: widget.randomID,
       rating: widget.rating,
       language: widget.lang,
+      onSelectGiphyItem: widget.onSelectGiphyItem,
       child: DraggableScrollableSheet(
         expand: isExpanded,
         minChildSize: _minExtent,
@@ -451,7 +454,7 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
         child: CircularProgressIndicator(),
       );
     }
-
+    final config = GiphySelectorConfig.of(context);
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8.0),
       // child: StaggeredGrid.countB
@@ -464,45 +467,44 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
         crossAxisSpacing: _spacing,
         itemBuilder: (ctx, idx) {
           GiphyGif gif = _list[idx];
-          return _item(gif);
+          double aspectRatio = (double.parse(gif.images!.fixedWidth.width) /
+              double.parse(gif.images!.fixedWidth.height));
+          return ClipRRect(
+            borderRadius: BorderRadius.circular(10.0),
+            child: InkWell(
+              onTap: () => (config.onSelectGiphyItem ?? _selectedGif).call(gif),
+              child: gif.images == null || gif.images?.fixedWidth.webp == null
+                  ? Container()
+                  : Image.network(
+                      gif.images!.fixedWidth.webp!,
+                      gaplessPlayback: true,
+                      fit: BoxFit.fill,
+                      headers: const {'accept': 'image/*'},
+                      loadingBuilder: (context, child, loadingProgress) {
+                        if (loadingProgress == null) {
+                          return child;
+                        }
+                        return AspectRatio(
+                          aspectRatio: aspectRatio,
+                          child: Container(color: Theme.of(context).cardColor),
+                        );
+                      },
+                      errorBuilder: (context, exception, stackTrace) {
+                        return AspectRatio(
+                          aspectRatio: aspectRatio,
+                          child: Container(
+                            color: Theme.of(context).cardColor,
+                          ),
+                        );
+                      },
+                    ),
+            ),
+          );
         },
       ),
     );
   }
 
-  Widget _item(GiphyGif gif) {
-    double aspectRatio = (double.parse(gif.images!.fixedWidth.width) /
-        double.parse(gif.images!.fixedWidth.height));
-
-    return ClipRRect(
-      borderRadius: BorderRadius.circular(10.0),
-      child: InkWell(
-        onTap: () => _selectedGif(gif),
-        child: gif.images == null || gif.images?.fixedWidth.webp == null
-            ? Container()
-            : Image.network(
-                gif.images!.fixedWidth.webp!,
-                gaplessPlayback: true,
-                fit: BoxFit.fill,
-                headers: const {'accept': 'image/*'},
-                loadingBuilder: (context, child, loadingProgress) {
-                  if (loadingProgress == null) {
-                    return child;
-                  }
-                  return AspectRatio(
-                    aspectRatio: aspectRatio,
-                    child: Container(color: Theme.of(context).cardColor),
-                  );
-                },
-                errorBuilder: (context, exception, stackTrace) => AspectRatio(
-                  aspectRatio: aspectRatio,
-                  child: Container(color: Theme.of(context).cardColor),
-                ),
-              ),
-      ),
-    );
-  }
-
   Future<void> _loadMore() async {
     //Return if is loading or no more gifs
     if (_isLoading || _collection?.pagination?.totalCount == _list.length) {
@@ -560,12 +562,10 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
     }
   }
 
-  // Return selected gif
   void _selectedGif(GiphyGif gif) {
     Navigator.pop(context, gif);
   }
 
-  // listener query
   void _listenerQuery() {
     _collection = null;
     _list = [];

lib/src/widgets/wrapper.dart

@@ -1,25 +1,25 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:giphy_selector/src/widgets/config.dart';
 
 import '../client/client.dart';
 import 'sheet.dart';
 
 class GiphySelector {
-  // Show Bottom Sheet
   static Future<GiphyGif?> getGif({
     required BuildContext context,
     required String apiKey,
     String rating = GiphyRating.g,
     String lang = GiphyLanguage.english,
-    String randomID = "",
-    String searchText = "",
-    String queryText = "",
+    String randomID = '',
+    String searchText = '',
+    String queryText = '',
     bool modal = true,
     Color? tabColor,
-  }) {
-    if (apiKey == "") {
-      throw Exception("apiKey must be not null or not empty");
+  }) async {
+    if (apiKey.isEmpty) {
+      throw Exception('apiKey must be not null or not empty');
     }
 
     return showModalBottomSheet<GiphyGif>(
@@ -28,15 +28,48 @@ class GiphySelector {
           borderRadius: BorderRadius.vertical(top: Radius.circular(10.0))),
       isScrollControlled: true,
       context: context,
-      builder: (ctx) => SafeArea(
-        child: GiphySelectorSheet(
-          apiKey: apiKey,
-          lang: lang,
-          randomID: randomID,
-          rating: rating,
-          searchText: searchText,
-          tabColor: tabColor,
-        ),
+      builder: (ctx) => GiphySelectorSheet(
+        apiKey: apiKey,
+        lang: lang,
+        randomID: randomID,
+        rating: rating,
+        searchText: searchText,
+        tabColor: tabColor,
+      ),
+    );
+  }
+
+  static Future<void> show({
+    required BuildContext context,
+    required String apiKey,
+    required OnSelectGiphyItem onSelectGiphyItem,
+    String rating = GiphyRating.g,
+    String lang = GiphyLanguage.english,
+    String randomID = '',
+    String searchText = '',
+    String queryText = '',
+    bool modal = true,
+    Color? tabColor,
+  }) {
+    if (apiKey.isEmpty) {
+      throw Exception('apiKey must be not null or not empty');
+    }
+
+    return showModalBottomSheet<GiphyGif>(
+      clipBehavior: Clip.antiAlias,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
+      ),
+      isScrollControlled: true,
+      context: context,
+      builder: (ctx) => GiphySelectorSheet(
+        apiKey: apiKey,
+        lang: lang,
+        randomID: randomID,
+        rating: rating,
+        searchText: searchText,
+        tabColor: tabColor,
+        onSelectGiphyItem: onSelectGiphyItem,
       ),
     );
   }
@@ -62,10 +95,9 @@ class GiphySelectorWrapper extends StatelessWidget {
     GiphyGif? gif = await GiphySelector.getGif(
       queryText: queryText,
       context: context,
-      apiKey: apiKey, //YOUR API KEY HERE
+      apiKey: apiKey,
       lang: GiphyLanguage.spanish,
     );
     if (gif != null) streamController.add(gif);
-    // stream.add(gif!);
   }
 }