Flutter GIF挑选插件giphy_picker的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter GIF挑选插件giphy_picker的使用

giphy_picker 是一个Flutter插件，它允许你从 Giphy 挑选动态GIF图像。

Gif

开始使用

首先，你需要在 Giphy Developers Portal 注册一个应用以获取API密钥。

挑选GIF

通过以下代码片段可以实现挑选GIF的功能：

import 'package:giphy_picker/giphy_picker.dart';

final gif = await GiphyPicker.pickGif(
  context: context, 
  apiKey: '[YOUR GIPHY APIKEY]'
);

请确保将 [YOUR GIPHY APIKEY] 替换为你自己的API密钥。

显示GIF

你可以使用 GiphyImage widget来显示GIF。下面是如何以原始格式渲染GIF的示例：

Widget build(BuildContext context) {
  return GiphyImage.original(gif: gif);
}

或者，你可以使用 Image widget 来加载和显示GIF图像：

Widget build(BuildContext context) {
  return Image.network(
    gif.images.original.url,
    headers: {'accept': 'image/*'}
  );
}

示例代码

以下是完整的示例代码，展示了如何创建一个简单的Flutter应用程序，其中包含一个按钮用于选择GIF，并在屏幕上显示所选的GIF。

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Giphy Picker Demo',
      home: MyHomePage(title: 'Giphy Picker Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  GiphyGif? _gif;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_gif?.title ?? 'Giphy Picker Demo'),
      ),
      body: SafeArea(
        child: Center(
          child: _gif == null
              ? const Text('Pick a gif..')
              : GiphyImage.original(gif: _gif!),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.search),
        onPressed: () async {
          // request your Giphy API key at https://developers.giphy.com/
          final gif = await GiphyPicker.pickGif(
            context: context,
            // YOUR GIPHY APIKEY HERE
            apiKey: '',
          );

          if (gif != null) {
            setState(() => _gif = gif);
          }
        },
      ),
    );
  }
}

请记得替换示例代码中的 apiKey: '' 为你的Giphy API密钥。

这个示例程序创建了一个具有浮动操作按钮（Floating Action Button）的界面，点击按钮后会弹出Giphy选择器，用户可以选择一个GIF并将其显示在界面上。


更多关于Flutter GIF挑选插件giphy_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter GIF挑选插件giphy_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用giphy_picker插件来选择GIF图像的示例代码。这个插件允许你从GIPHY API中搜索和选择GIF图像。

首先，确保你已经在pubspec.yaml文件中添加了giphy_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  giphy_picker: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用giphy_picker：

  1. 导入包：

在你的Dart文件中导入giphy_picker包：

import 'package:giphy_picker/giphy_picker.dart';
  1. 配置GIPHY API密钥：

在使用giphy_picker之前，你需要一个GIPHY API密钥。你可以从GIPHY开发者门户获取一个免费的API密钥。然后，在你的项目中配置这个密钥。例如，你可以在main.dart文件中或者在某个配置文件中设置它：

void main() {
  // 设置GIPHY API密钥
  GiphyPicker.apiKey = '你的GIPHY API密钥';
  runApp(MyApp());
}
  1. 使用GiphyPicker：

在你的UI中，你可以使用GiphyPicker小部件来打开GIF选择器。例如，你可以在一个按钮点击事件中调用它：

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

void main() {
  GiphyPicker.apiKey = '你的GIPHY API密钥';
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Giphy Picker Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Giphy? selectedGiphy;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () async {
            final result = await GiphyPicker.pick(
              context: context,
              theme: GiphyPickerTheme.dark, // 或者使用 GiphyPickerTheme.light
              apiKey: '你的GIPHY API密钥', // 如果在main函数中未设置，可以在这里设置
            );
            if (result != null && result.length > 0) {
              setState(() {
                selectedGiphy = result.first;
              });
            }
          },
          child: Text('Pick GIF'),
        ),
        if (selectedGiphy != null)
          Image.network(selectedGiphy!.images!.fixedHeightSmall!.url!),
      ],
    );
  }
}

在这个示例中，当用户点击“Pick GIF”按钮时，GiphyPicker会打开一个对话框，允许用户从GIPHY API中搜索和选择一个GIF。选择完成后，选中的GIF会显示在屏幕上。

注意：在实际应用中，你应该避免在按钮点击事件中硬编码API密钥。最佳实践是在应用程序启动时（例如在main函数中）设置API密钥，如上面的示例所示。

此外，确保你的应用具有互联网访问权限，因为giphy_picker需要从GIPHY API获取数据。你可以在AndroidManifest.xml（对于Android）和Info.plist（对于iOS）中添加必要的权限声明。

回到顶部