FlutterTenor GIF 搜索插件tenor_flutter的使用

Tenor Flutter

tenor_flutter 是一个将 Tenor GIF 搜索 集成到 Flutter 的插件。该插件通过使用 tenor_dart 包直接与 Tenor API V2 进行通信。

目前，该插件提供了一个可定制的 UI 体验，用于从 Tenor GIF 搜索 API 中搜索和选择 GIF 或贴纸。

^{如果你喜欢这个插件，请给它点个星来支持我们。}

使用须知

• 要开始使用 tenor_flutter，你需要在 Tenor 注册项目并获取 API 密钥。
• Tenor 要求使用其 API 的项目进行适当的 归因。此插件默认启用 “Powered By Tenor” 和 “Search Tenor”。你只需要其中一个即可。

获取 Tenor API v2 密钥

1. 登录 Google Cloud Console
2. 创建一个 新项目
3. 进入 Google Cloud Marketplace 并找到 Tenor API
4. 点击 Enable 以激活它
5. 在导航菜单中，进入 APIs & Services 标签页并选择 Credentials
6. 点击 + Create Credentials 并选择 API key
7. 复制生成的 API 密钥
8. 将此 API 密钥作为参数传递给 Tenor(apiKey: 'YOUR_API_KEY')

使用方法

安装

flutter pub add tenor_flutter

^{遇到问题？请阅读 pub.dev 的 安装页面。}

导入

在需要使用的 Dart 文件中导入包：

import 'package:tenor_flutter/tenor_flutter.dart';

初始化

必须传递由 Tenor 提供的有效 apiKey。强烈建议同时传递 clientKey，这将帮助你区分哪个项目正在发出请求。

final tenorClient = Tenor(apiKey: 'YOUR_API_KEY', clientKey: 'YOUR_PROJECT_NAME');

示例

更多详细的示例请参阅 example/lib/main.dart。

以下是如何显示 UI 作为底部弹出框，然后打印用户的选择。如果返回 null，则表示用户在未选择 GIF 的情况下关闭了弹出框。

final tenorClient = Tenor(apiKey: 'YOUR_API_KEY', clientKey: 'YOUR_PROJECT_NAME');
final TenorResult? result = await tenorClient.showAsBottomSheet(context: context);
print(result?.media.tinyGif?.url);

不需要 UI？

如果你希望完全自定义而不依赖于任何依赖项，可以考虑使用 Tenor Dart。

赞助商

下一步计划

• 文档
• 测试（欢迎 贡献）
• 进一步改进

贡献

如果你看到这里，那你真是太棒了！你可以通过多种方式 贡献：

• 拾取任何标记为 “good first issue” 的问题
• 提出任何功能或增强建议
• 报告 bug
• 修复 bug
• 编写和改进文档
• 发送 Pull Request 🙏

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_config/flutter_config.dart';
import 'package:tenor_flutter/tenor_flutter.dart';
import 'package:tenor_flutter_example/examples/dark_theme.dart';
import 'package:tenor_flutter_example/examples/localization.dart';

void main() async {
  // 仅用于从 .env 文件加载 API 密钥，不是必需的
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterConfig.loadEnvVariables();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tenor Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  // 替换 apiKey 为你从 Tenor 获取的 API 密钥 > https://developers.google.com/tenor/guides/quickstart
  var tenor = Tenor(apiKey: FlutterConfig.get('TENOR_API_KEY'));
  // 定义一个结果以便稍后显示
  TenorResult? selectedResult;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Tenor Flutter Demo'),
      ),
      body: _exampleBody(),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 默认实现 tenor flutter。显示 GIF 选择器作为底部弹出框，并更新状态中的 selectedResult。
          FloatingActionButton(
            onPressed: () async {
              final result = await tenor.showAsBottomSheet(context: context);
              setState(() {
                selectedResult = result;
              });
            },
            tooltip: 'Default',
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }

  // 更多示例，见：https://github.com/Flyclops/tenor_flutter/tree/main/example/lib/examples
  Widget _exampleBody() {
    final selectedGif = selectedResult?.media.tinyGif ??
        selectedResult?.media.tinyGifTransparent;
    return Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                const SizedBox(height: 8),
                const Text('Additional Examples'),
                const SizedBox(height: 8),
                Wrap(
                  alignment: WrapAlignment.center,
                  spacing: 8,
                  children: [
                    // https://github.com/Flyclops/tenor_flutter/tree/main/example/lib/examples/dark_theme.dart
                    ElevatedButton(
                      onPressed: () => push(const DarkTheme()),
                      child: const Text('Dark Theme'),
                    ),
                    // https://github.com/Flyclops/tenor_flutter/tree/main/example/lib/examples/localization.dart
                    ElevatedButton(
                      onPressed: () => push(const Localization()),
                      child: const Text('Localization'),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              selectedResult != null && selectedGif != null
                  ? Image.network(
                      selectedGif.url,
                      width: selectedGif.dimensions.width,
                      height: selectedGif.dimensions.height,
                    )
                  : const Text('No GIF selected'),
            ],
          ),
        ],
      ),
    );
  }

  void push(Widget page) {
    Navigator.of(context).push(
      MaterialPageRoute<String>(
        builder: (BuildContext context) {
          return page;
        },
      ),
    );
  }
}