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

giphy_get

Overview

此包允许通过纯Dart代码从GIPHY获取GIF、贴纸或表情符号，遵循Giphy SDK设计指南。

Getting Started

重要！您必须在Giphy Developers注册您的应用并获取API密钥。

Localizations

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

return MaterialApp(
  title: 'Giphy Get Demo',
  localizationsDelegates: [
    // 默认代理
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,

    // 添加这行
    GiphyGetUILocalizations.delegate
  ],
  supportedLocales: [
    // 您支持的语言
    Locale('en', ''),
    Locale('es', ''),
    Locale('da', ''),
  ],
  home: MyHomePage(title: 'Giphy Get Demo'),
  themeMode: Provider.of<ThemeProvider>(context).currentTheme,
);

获取GIF

获取单个GIF

import 'package:giphy_get/giphy_get.dart';

GiphyGif gif = await GiphyGet.getGif(
  context: context, // 必填
  apiKey: "your api key HERE", // 必填。
  lang: GiphyLanguage.english, // 可选 - 查询语言。
  randomID: "abcd", // 可选 - 特定用户的ID/代理。
  tabColor: Colors.teal, // 可选 - 默认强调色。
  debounceTimeInMilliseconds: 350, // 可选 - 搜索按键之间的暂停时间
);

Options

获取随机ID

GiphyClient giphyClient = GiphyClient(apiKey: "YOUR API KEY");
String randomId = await giphyClient.getRandomId();

Widgets

可选但如果您想获取更多用户GIF或查看Giphy上的内容，遵循Giphy设计指南，则此小部件是必需的。

GiphyGifWidget

GiphyGetWrapper

方法

void getGif(String queryText,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)),
        );
    })

    });

示例APP

首先导出您的Giphy API密钥：

export GIPHY_API_KEY=YOUR_GIPHY_API_KEY

然后运行。

完整示例代码

import 'package:flutter/material.dart';
import 'package:giphy_get/giphy_get.dart';
import 'package:giphy_get/l10n.dart';
import 'package:giphy_get_demo/providers/theme_provider.dart';
import 'package:provider/provider.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MultiProvider(providers: [
    ChangeNotifierProvider(
        create: (ctx) => ThemeProvider(currentTheme: ThemeMode.system))
  ], child: const MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Giphy Get Demo',
      theme: ThemeData(
          brightness: Brightness.light,
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          useMaterial3: Provider.of<ThemeProvider>(context).material3),
      darkTheme: ThemeData(
          brightness: Brightness.dark,
          primarySwatch: Colors.purple,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          useMaterial3: Provider.of<ThemeProvider>(context).material3),
      localizationsDelegates: [
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
        GiphyGetUILocalizations.delegate
      ],
      supportedLocales: const [
        Locale('en', ''),
        Locale('es', ''),
        Locale('da', ''),
        Locale('fr', ''),
      ],
      home: const MyHomePage(title: 'Giphy Get Demo'),
      themeMode: Provider.of<ThemeProvider>(context).currentTheme,
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({required this.title, super.key});
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ThemeProvider themeProvider = Provider.of<ThemeProvider>(context);

  GiphyGif? currentGif;
  late GiphyClient client = GiphyClient(apiKey: giphyApiKey, randomId: '');
  String randomId = "";
  String giphyApiKey = const String.fromEnvironment("GIPHY_API_KEY");

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      client.getRandomId().then((value) {
        setState(() {
          randomId = value;
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return GiphyGetWrapper(
        giphy_api_key: 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("GET DEMO")
                ],
              ),
            ),
            body: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Row(
                    children: [
                      const Expanded(child: Text("Dark Mode")),
                      Switch(
                          value:
                              Theme.of(context).brightness == Brightness.dark,
                          onChanged: (value) {
                            themeProvider.setCurrentTheme(
                                value ? ThemeMode.dark : ThemeMode.light);
                          })
                    ],
                  ),
                  Row(
                    children: [
                      const Expanded(child: Text("Material 3")),
                      Switch(
                          value: themeProvider.material3,
                          onChanged: (value) {
                            themeProvider.setMaterial3(value);
                          })
                    ],
                  ),
                  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,
                    showGIFs: true,
                    showStickers: true,
                    showEmojis: true,
                  );
                },
                tooltip: 'Open Sticker',
                child: const Icon(Icons.insert_emoticon)),
          );
        });
  }
}