Giphy Selector
Overview
Inspired by giphy_get
This package allow to get gifs, sticker or emojis from GIPHY in pure dart code using Giphy SDK design guidelines.
Getting Started
Important! you must register your app at Giphy Develepers and get your APIKEY
Localizations
Currently english, french and spanish is supported.
void runApp() {
return MaterialApp(
title: ' Demo',
localizationsDelegates: [
// Default Delegates
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
// Add this line
GiphyGetUILocalizations.delegate
],
supportedLocales: [
//Your supported languages
Locale('en', ''),
Locale('es', ''),
Locale('fr', ''),
],
home: MyHomePage(title: ' Demo'),
);
}Get only Gif
This is for get gif without wrapper and tap to more
import 'package:giphy_selector/giphy_selector.dart';
GiphyGif gif = await GiphySelector.getGif(
context: context, //Required
apiKey: "your api key HERE", //Required.
lang: GiphyLanguage.english, //Optional - Language for query.
randomID: "abcd", // Optional - An ID/proxy for a specific user.
modalOptions: ModalOptions( // Option - Show Giphy selector in a modal
Offset.zero,
Alignment.topLeft
),
tabColor:Colors.teal, // Optional- default accent color.
);Options
| Value | Type | Description | Default |
|---|---|---|---|
lang |
String | Use ISO 639-1 language code or use GiphyLanguage constants | GiphyLanguage.english |
randomID |
String | An ID/proxy for a specific user. | null |
searchText |
String | Input search hint, we recommend use flutter_18n package for translation | "Search GIPHY" |
modalOptions |
ModalOptions | When not null, is used to position the Giphy selector in a modal |
null |
tabColor |
Color | Color for tabs and loading progress, | Theme.of(context).accentColor |
Get Random ID
Futurew<void> doSomeThing() async {
GiphyClient giphyClient = GiphyClient(apiKey: 'YOUR API KEY');
String randomId = await giphyClient.getRandomId();
}Widgets
Optional but this widget is required if you get more gif's of user or view on Giphy following Giphy Design guidelines
GiphyGifWidget
Parameters
| Value | Type | Description | Default |
|---|---|---|---|
gif required |
GiphyGif | GiphyGif object from stream or JSON | |
giphyGetWrapper required |
GiphyGetWrapper | selector instance used to find more by author | null |
showGiphyLabel |
bool | show or hide Powered by GIPHYlabel at bottom |
true |
borderRadius |
BorderRadius | add border radius to image | null |
imageAlignment |
Alignment | this widget is a Stack with Image and tap buttons this property adjust alignment | Alignment.center |
GiphyGetWrapper
Parameters
| Value | Type | Description | Default |
|---|---|---|---|
giphy_api_key required |
String | Your Giphy API KEY | null |
builder |
function | return Stream<GiphyGif> and Instance of GiphyGetWrapper | null |
Available methods
void getGif(String queryText, BuildContext context);void build(BuildContext context) {
return GiphyGetWrapper(
giphy_api_key: 'REPLACE_WITH YOUR_API_KEY',
// Builder with Stream<GiphyGif> and Instance of GiphyGetWrapper
builder: (stream, giphyGetWrapper) =>
StreamBuilder<GiphyGif>(
stream: stream,
builder: (context, snapshot) {
return Scaffold(
body: snapshot.hasData
? SizedBox(
// GiphyGifWidget with tap to more
child: GiphyGifWidget(
imageAlignment: Alignment.center,
gif: snapshot.data,
giphyGetWrapper: giphyGetWrapper,
borderRadius: BorderRadius.circular(30),
showGiphyLabel: true,
),
)
: Text("No GIF"),
floatingActionButton: FloatingActionButton(
onPressed: () async {
//Open Giphy Sheet
giphyGetWrapper.getGif('', context);
},
tooltip: 'Open Sticker',
child: Icon(Icons.insert_emoticon),
),
);
}
)
);
}Using the example
First export your giphy api key
export GIPHY_API_KEY=YOUR_GIPHY_API_KEY
and then run.
Contrib
Feel free to make any PR's
