flutter_giphy

Description:

flutter giphy

Flutter Giphy #



Fetch,Search and Share Gifs from Giphy in your Flutter app.
Features #

Show Gif Picker
Search Gifs
Full control over the Gif Picker look and feel
Support for building Custom UI for the Gif Picker

Getting started #
1. Depend on it #
Add this to your package's pubspec.yaml file:
dependencies:
flutter_giphy: latest-version
copied to clipboard
2. Install it #
$ pub get
copied to clipboard
Usage #
1.Import the package
First, you need to import the package into your Dart file:
import 'package:flutter_giphy/flutter_giphy.dart';
copied to clipboard
###1. Using the bottomSheet
To use the bottomSheet widget in your app, you need to call the showGifPicker method: This method
requires a BuildContext and a Giphy API key. It also has optional parameters for customizing the
search bar, loading widget, error widget, and the background color of the bottom sheet so that you
can customize the bottom sheet to match your UI.
To handle the selected gif, you need to pass a callback function to the showGifPicker method. This
callback function will be called when the user selects a gif.
FlutterGiphy flutterGiphy = FlutterGiphy(apiKey: 'yourgiphyapi_key');


flutterGiphy.showGifPicker(
context: context,
apikey: 'your_giphy_api_key',
onSelected: (GiphyData gif) {
// Handle the selected gif here
},
);
copied to clipboard
2. Clear Search #
You can clear the search input and reset the gif picker to the trending view using the clearSearch
method.
flutterGiphy.clearSearch();
copied to clipboard
_flutterGiphy.showGifPicker(
context: context,
searchBarDecoration: InputDecoration(
hintText: 'Search Gif',
prefixIcon: const Icon(
Icons.search,
color: Colors.black,
),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
suffixIcon: InkWell(
onTap: () {
_flutterGiphy.clearSearch();
Navigator.pop(context);
},
child: const Icon(
Icons.clear,
color: Colors.black,
)),
),
apikey: 'your_giphy_api_key',
onSelected: (GiphyData value) {
setState(() {
selectedGif = value;
});
});
copied to clipboard
Please replace 'your_giphy_api_key' with your actual Giphy API key.
Fetching GIFs with Giphy class #
The Giphy class provides methods to fetch GIFs from the Giphy API. Here's how you can use it:
1. Initialize the Giphy class #
You need to initialize the Giphy class with your Giphy API key

Giphy giphy = Giphy(apiKey: 'your_giphy_api_key', language: GiphyLanguage.English);
copied to clipboard
language is an optional paramater thats allowes changing the requests lanaguage, here is a list of
languages supported here
Please replace 'your_giphy_api_key' with your actual Giphy API key.
2. Fetch GIFs #
You can fetch trending GIFs using the fetchTrendingGif anmd searchGif method:
offset Specifies the starting position of the results.
Default: “0”
Maximum: “4999”

var trendingGifs = await giphy.fetchTrendingGif(offset:0);

copied to clipboard
This method returns a GiphyResponse object that contains a list of GiphyData objects. Each GiphyData
object represents a GIF.
3. Display the GIFs #
You can display the fetched GIFs in your Flutter app. Here's an example of how to display the GIFs
in a GridView:
void fetchTrendingGif() async {
Giphy rawGiphy = Giphy(apiKey: 'your_giphy_api_key');
var trendingGifs = await rawGiphy.fetchTrendingGif(offset: 0);
setState(() {
fetchTrendingGifs.addAll(trendingGifs.data ?? []);
});
}

GridView.builder(
shrinkWrap: true,
itemCount: fetchTrendingGifs.length,
padding: const EdgeInsets.symmetric(horizontal: 20),
itemBuilder: (context, index) {
return Image.network(
trendingGifs.data[index].images.original.url);
},
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 3, crossAxisSpacing: 3, crossAxisCount: 2),
);
copied to clipboard
This will create a grid view with 2 columns that displays the trending GIFs.
4. Error Handling #
If there's an error while fetching the GIFs, the fetchTrendingGif method will throw an exception.
You should catch and handle this exception:
try {
var trendingGifs = await giphy.fetchTrendingGif(offset: 0);
} catch (e) {
print('Failed to fetch GIFs: $e');
}
copied to clipboard
This will print an error message if there's an error while fetching the GIFs.