Flutter GIF搜索与展示插件enough_giphy_flutter的使用

enough_giphy_flutter

enough_giphy_flutter 是一个强大的、可定制的GIPHY选择器，可以轻松集成到您的Flutter应用中。

优势

• 自动归属：GIPHY的归属不是事后考虑的问题 - 您可以直接使用它来获得应用程序的批准，或者根据需要自定义归属。
• 平台特定UI：iOS和MacOS上使用Cupertino风格，Android和其他平台上使用Material风格。
• 易于本地化所有文本。
• 根据您的偏好和风格自定义外观和感觉。
• 尽可能少地使用依赖项。

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  enough_giphy_flutter: ^0.2.1

最新版本的enough_giphy_flutter可以在Pub页面查看。

使用方法

需求

1. API Key：每个支持的平台都需要在developers.giphy.com注册一个API密钥。请参考快速入门指南获取详细信息。选择API而不是SDK生成API密钥。
2. Android权限：确保在AndroidManifest.xml中添加互联网权限：

   <uses-permission android:name="android.permission.INTERNET"/>
   

3. 生产密钥：准备好后，申请一个GIPHY生产密钥。

选择GIF、贴纸或表情符号

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

示例代码

import 'package:enough_giphy_flutter/enough_giphy_flutter.dart';
import 'package:flutter/material.dart';

class GiphyPickerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      child: Text('GIPHY'),
      onPressed: () async {
        final gif = await Giphy.getGif(
          context: context,
          apiKey: 'your_api_key_here', // 替换为您的API密钥
        );
        if (gif != null) {
          // 用户选择了GIF，现在可以按需处理
          // 示例：使用GiphyImageView显示GIF
          showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: Text(gif.title),
              content: GiphyImageView(
                gif: gif,
              ),
            ),
          );
        }
      },
    );
  }
}

自定义选择内容

可以通过设置type参数来切换GIF、贴纸和表情符号的选择：

final gif = await Giphy.getGif(
  context: context,
  apiKey: 'your_api_key_here',
  type: GiphyType.stickers, // 或者 GiphyType.gifs 或 GiphyType.emoji
);

还可以通过设置lang参数来选择本地化内容，并通过rating参数来控制内容评级：

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

本地化

可以使用以下字符串参数对getGif()方法进行本地化：

• searchLabelText
• searchHintText
• searchEmptyResultText
• headerGifsText
• headerStickersText
• headerEmojiText

示例如下：

final gif = await Giphy.getGif(
  context: context,
  apiKey: 'your_api_key_here',
  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来显示确认对话框：

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

预览对话框会根据平台显示为Material或Cupertino风格的对话框，其中包含GIF的标题和创建者信息。点击创建者名称可以搜索其他相同创建者的GIF。

归属

默认情况下，应用会自动满足GIPHY的归属政策。如果您想显示不同的归属，可以设置attribution参数：

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

如果不想显示归属，可以将showAttribution设置为false：

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

自定义UI

您可以自定义很多方面，例如：

• 设置gridType以使用方形图块。
• 调整列间距gridSpacing。
• 调整最小列数gridMinColumns。
• 自定义gridBorderRadius。
• 禁用搜索showSearch。
• 禁用类型切换showTypeSwitcher。
• 启用高质量预览showPreview。
• 显示自定义UIonSelected。

构建自定义GIPHY体验

使用widgets包构建完全自定义的GIPHY解决方案。请参考API文档和源码获取更多指导。

import 'package:enough_giphy_flutter/widgets.dart';

特性和Bug报告

请在问题跟踪器中提交特性请求和Bug报告。

许可证

本项目遵循商业友好的Mozilla Public License 2.0许可证。

完整示例代码

import 'package:enough_giphy_flutter/enough_giphy_flutter.dart';
import 'package:enough_platform_widgets/enough_platform_widgets.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PlatformApp(
      title: 'enough_giphy_flutter',
      material: (context, target) => MaterialAppData(
        theme: ThemeData(
          primarySwatch: Colors.blue,
          brightness: Brightness.light,
        ),
      ),
      home: const MyHomePage(title: 'enough_giphy_flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _images = <GiphyGif>[];
  final _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final content = Center(
      child: _images.isEmpty
          ? const Center(child: Text('Please add a GIF'))
          : ListView.builder(
              itemBuilder: (context, index) => GiphyImageView(
                gif: _images[index],
                fit: BoxFit.contain,
              ),
              itemCount: _images.length,
              controller: _scrollController,
            ),
    );
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text(widget.title),
      ),
      material: (context, platform) => MaterialScaffoldData(
        body: content,
        floatingActionButton: FloatingActionButton(
          onPressed: _selectGif,
          tooltip: 'Select Gif',
          child: const Icon(Icons.gif),
        ),
      ),
      cupertino: (context, platform) => CupertinoPageScaffoldData(
        body: Stack(
          children: [
            content,
            SafeArea(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: CupertinoButton.filled(
                  onPressed: _selectGif,
                  child: const Icon(Icons.gif),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// Selects and display a gif, sticker or emoji from GIPHY
  void _selectGif() async {
    const giphyApiKey = 'your_api_key_here'; // 替换为您的API密钥
    if (giphyApiKey == 'your_api_key_here') {
      showPlatformDialog(
        context: context,
        builder: (context) => PlatformAlertDialog(
          title: const Text('Check your GIPHY API Key'),
          content: const Text('You need to register an API key first.'),
        ),
      );
      return;
    }
    // let the user select the gif:
    final gif = await Giphy.getGif(
      context: context,
      apiKey: giphyApiKey,
      type: GiphyType.gifs, // choose between gifs, stickers and emoji
      rating: GiphyRating.g, // general audience / all ages
      lang: GiphyLanguage.english, // 'en'
      keepState: true, // remember type and search query
      showPreview: true, // shows a preview before returning the GIF
    );
    // process the gif:
    if (gif != null) {
      _images.insert(0, gif);
      setState(() {});
      WidgetsBinding.instance.addPostFrameCallback((duration) {
        _scrollController.animateTo(
          0,
          duration: const Duration(microseconds: 500),
          curve: Curves.easeInOut,
        );
      });
    }
  }
}

以上是关于enough_giphy_flutter插件的详细介绍和完整示例代码。希望这些信息能帮助您更好地理解和使用该插件。如果有任何问题或需要进一步的帮助，请随时提问！