enough_giphy_flutter

将强大且可定制的GIPHY选择器集成到您的Flutter应用程序中。

优势

使用enough_giphy_flutter具有以下优势

  • 强制性的GIPHY归属信息并非事后添加——“按原样”使用即可让您的应用获得批准，或根据您的需求自定义归属信息。
  • 平台特定UI：在iOS和MacOS上使用Cupertino风格，在Android和其他平台上使用Material风格。
  • 轻松本地化所有文本。
  • 根据您的偏好和风格自定义外观。
  • 尽可能少地使用依赖项。

安装

将此依赖项添加到您的pubspec.yaml文件中

dependencies:
  enough_giphy_flutter: ^0.2.1

enough_giphy_flutter的最新版本是enough_giphy_flutter版本。

API文档

请在https://pub.dev/documentation/enough_giphy_flutter/latest/查看完整的API文档

用法

使用enough_giphy_flutter从GIPHY中选择GIF、贴纸或表情。

要求

  • 在developers.giphy.com为每个支持的平台注册必需的API密钥，详情请参考https://developers.giphy.com/docs/api#quick-start-guide。生成API密钥时，请选择API而不是SDK。
  • Android：请确保在您的AndroidManifest.xml中添加了互联网权限：<uses-permission android:name="android.permission.INTERNET"/>
  • 准备就绪后，申请GIPHY生产密钥

选择GIF、贴纸或表情

使用Giphy.getGif(...)来选择GIF、贴纸或表情。

import 'package:enough_giphy_flutter/enough_giphy_flutter.dart';
[...]
  @override
  Widget build(BuildContext context) {
      return TextButton(
        child: Text('GIPHY'), 
        onPressend: () async {
            final gif = await Giphy.getGif(context: context, apiKey: '123abc123');
            if (gif != null) {
                // the user has selected a GIF, now handle it in your own way.
                // Example: display gif using the GiphyImageView:
                showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                        title: Text(gif.title),
                        content: GiphyImageView(
                            gif: gif,
                        ),
                    ),
                );
            }
        },
      );
  }

选择要获取的内容

  • 设置type参数可在gif、贴纸和表情之间切换，例如：

final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    type: GiphyType.stickers, 
);

final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    type: GiphyType.stickers,
    lang: GiphyLanguage.german, 
);
  • 使用rating参数显示非“所有年龄”内容

final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    type: GiphyType.gifs,
    lang: GiphyLanguage.spanish, 
    rating: GiphyRating.pg13,
);

本地化

使用getGif()方法的以下String参数来本地化文本：

  • searchLabelText
  • searchHintText
  • searchEmptyResultText
  • headerGifsText
  • headerStickersText
  • headerEmojiText您还可以定义一个errorBuilder回调来显示本地化的错误消息。

// example for localizing text in German:
final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    type: GiphyType.gifs,
    lang: GiphyLanguage.german, 
    rating: GiphyRating.g,
    searchLabelText: 'GIPHY Suche',
    searchHintText: 'Deine Suchanfrage',
    searchEmptyResultText: 'Nichts gefunden...',
    headerGifsText: 'GIFs',
    headerStickersText: 'Sticker',
    headerEmojiText: 'Emoticons',
    errorBuilder: (context, error, stacktrace) => 
        const Center(child: Text('Leider gab es einen Fehler,\nbitte probiere es später noch einmal.')),
);

预览

通过将showPreview参数设置为true，您可以在选择GIF之前显示确认对话框。

final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    showPreview: true,
);

预览可以是Material风格的AlertDialog，也可以是Cupertino风格的CupertinoAlertDialog，具体取决于平台。此对话框将显示标题，如果可用，还将显示GIF的创建者。点击创建者姓名即可搜索该创建者的其他GIF。

归属

通过enough_giphy_flutter，您的应用会自动符合GIPHY归属政策。

  • GIPHY Logo会显示在搜索字段旁边。
  • 预览对话框显示所选GIF的创建者。

如果要显示不同的归属信息，请设置Widget? attribution参数，例如：

final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    attribution: Image.asset('assets/images/giphy.gif', height: 40),
);

要隐藏归属信息，请将showAttribution设置为false。

final gif = await Giphy.getGif(
    context: context, 
    apiKey: 'abc123abc',
    showAttribution: false,
);

自定义UI

除了上述内容，您还可以自定义许多其他内容，例如：

  • 将gridType设置为GridType.squareFixedColumns或GridType.squareFixedWidth，以使用方形图块而不是默认的堆叠图块。您甚至可以指定自己的gridBuilder来创建您自己的表示形式。
  • 使用[gridSpacing]调整列之间的间距，默认为4.0。
  • 使用[gridMinColumns]调整显示的最小列数，默认为2。
  • 创建您自己的gridBorderRadius或将其设置为null，以根据您的喜好调整网格中显示的GIF的边框。
  • 通过将[showSearch]设置为false来禁用搜索。
  • 通过将[showTypeSwitcher]设置为false来禁用用户在gif、贴纸和表情之间切换。
  • 通过将[showPreview]设置为true来启用在返回选择之前显示高质量预览。
  • 将[showAttribution]设置为false以隐藏归属信息，或使用[attribution]指定您自己的归属小部件。
  • 通过将[keepState]设置为true来启用在调用之间保留当前选定类型和搜索的状态。
  • 通过设置自定义的[onSelected]回调，在用户选择了[GiphyGif]后，在GIPHY表单的顶部显示您自己的UI。
  • 创建您自己的previewBorderRadius或将其设置为null，以根据您的喜好调整预览中显示的GIF的边框（请记住将showPreview设置为true）。

构建您自己的Giphy体验

使用widgets包轻松构建完全自定义的GIPHY解决方案。请参阅API文档和源代码以获取指导。

import 'package:enough_giphy_flutter/widgets.dart';

功能和 Bug

请在问题跟踪器提交功能请求和bug。

许可证

根据商业友好型Mozilla Public License 2.0许可。

GitHub

查看 Github