Flutter GIF选择插件giphy_selector的使用

Flutter GIF选择插件giphy_selector的使用

本插件允许你从GIPHY获取GIF、贴纸或表情符号，使用纯Dart代码并通过Giphy SDK遵循设计指南。

获取开始

在使用该插件之前，你需要在Giphy开发者页面注册你的应用并获取API密钥。

本地化

目前支持英语、法语和西班牙语。

void main() {
  runApp(MaterialApp(
    title: 'Demo',
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GiphyGetUILocalizations.delegate
    ],
    supportedLocales: [
      Locale('en', ''),
      Locale('es', ''),
      Locale('fr', ''),
    ],
    home: MyHomePage(title: 'Demo'),
  ));
}

获取仅GIF

此部分用于获取不带包装的GIF，并通过点击来查看更多内容。

import 'package:giphy_selector/giphy_selector.dart';

GiphyGif gif = await GiphySelector.getGif(
  context: context, // 必须参数
  apiKey: "your api key HERE", // 必须参数
  lang: GiphyLanguage.english, // 可选参数 - 查询语言
  randomID: "abcd", // 可选参数 - 特定用户的ID/代理
  modalOptions: ModalOptions( // 可选参数 - 在模态框中显示Giphy选择器
    Offset.zero,
    Alignment.topLeft
  ),
  tabColor:Colors.teal, // 可选参数 - 默认为强调色
);

选项

获取随机ID

Future<void> doSomeThing() async {
  GiphyClient giphyClient = GiphyClient(apiKey: 'YOUR API KEY');
  String randomId = await giphyClient.getRandomId();
}

小部件

GiphyGifWidget

GiphyGetWrapper

可用方法

void getGif(String queryText, BuildContext context);

void build(BuildContext context) {
  return GiphyGetWrapper(
      giphy_api_key: 'REPLACE_WITH YOUR_API_KEY',
      // 包含Stream<GiphyGif>和GiphyGetWrapper实例的构建器
      builder: (stream, giphyGetWrapper) =>
          StreamBuilder<GiphyGif>(
              stream: stream,
              builder: (context, snapshot) {
                return Scaffold(
                  body: snapshot.hasData
                      ? SizedBox(
                    // 带有点击更多功能的GiphyGifWidget
                    child: GiphyGifWidget(
                      imageAlignment: Alignment.center,
                      gif: snapshot.data,
                      giphyGetWrapper: giphyGetWrapper,
                      borderRadius: BorderRadius.circular(30),
                      showGiphyLabel: true,
                    ),
                  )
                      : Text("No GIF"),
                  floatingActionButton: FloatingActionButton(
                    onPressed: () async {
                      // 打开Giphy表单
                      giphyGetWrapper.getGif('', context);
                    },
                    tooltip: 'Open Sticker',
                    child: Icon(Icons.insert_emoticon),
                  ),
                );
              }
          )
  );
}

使用示例

首先导出你的Giphy API密钥：

export GIPHY_API_KEY=YOUR_GIPHY_API_KEY

然后运行项目。

示例代码

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:giphy_selector/giphy_selector.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb) {
    await dotenv.load(mergeWith: Platform.environment);
  } else {
    await dotenv.load();
  }

  runApp(const MyApp());
}

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

  // 这个小部件是你应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GiphyGetUILocalizations.delegate
      ],
      supportedLocales: const [
        Locale('en', ''),
        Locale('es', ''),
        Locale('fr', ''),
      ],
      home: const MyHomePage(title: 'Demo'),
      themeMode: ThemeMode.system,
    );
  }
}

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

  final String title;

  [@override](/user/override)
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GiphyGif? currentGif;
  late final GiphyClient client;
  String randomId = '';
  String giphyApiKey = '';

  [@override](/user/override)
  void initState() {
    super.initState();

    client = GiphyClient(apiKey: giphyApiKey, randomId: '');
    WidgetsBinding.instance.addPostFrameCallback((_) {
      client.getRandomId().then((value) {
        setState(() {
          randomId = value;
        });
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GiphySelectorWrapper(
        apiKey: giphyApiKey,
        builder: (stream, giphyGetWrapper) {
          stream.listen((gif) {
            setState(() {
              currentGif = gif;
            });
          });

          return Scaffold(
            appBar: AppBar(
              title: Row(
                children: [
                  Image.asset("assets/img/GIPHY Transparent 18px.png"),
                  const SizedBox(
                    width: 20,
                  ),
                  const Text("Demo")
                ],
              ),
            ),
            body: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Align(
                alignment: Alignment.center,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const SizedBox(
                      height: 20,
                    ),
                    Text("Random ID: $randomId"),
                    const Text(
                      "Selected GIF",
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    currentGif != null
                        ? SizedBox(
                            child: GiphyGifWidget(
                              imageAlignment: Alignment.center,
                              gif: currentGif!,
                              giphyGetWrapper: giphyGetWrapper,
                              borderRadius: BorderRadius.circular(30),
                              showGiphyLabel: true,
                            ),
                          )
                        : const Text("No GIF")
                  ],
                ),
              ),
            ),
            floatingActionButton: FloatingActionButton(
                onPressed: () async {
                  giphyGetWrapper.getGif('', context);
                },
                tooltip: 'Open Sticker',
                child: const Icon(Icons
                    .insert_emoticon)), // 这个逗号使自动格式化更美观
          );
        });
  }
}