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

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

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

enough_giphy 是一个纯 Dart 实现的 GIPHY 客户端,不依赖于 Flutter。你可以使用它来检索 GIF、贴纸、表情符号等。

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  enough_giphy: ^0.1.0

最新的 enough_giphy 版本可以通过 Pub.dev 查看。

API 文档

完整的 API 文档可以在 这里 查看。

使用方法

要求

示例代码

下面是一个完整的示例 Demo,展示了如何使用 enough_giphy 插件进行 GIF 搜索和展示:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GIF Search with enough_giphy',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GifSearchPage(),
    );
  }
}

class GifSearchPage extends StatefulWidget {
  @override
  _GifSearchPageState createState() => _GifSearchPageState();
}

class _GifSearchPageState extends State<GifSearchPage> {
  final String apiKey = 'YOUR_GIPHY_API_KEY'; // 替换为你的 GIPHY API 密钥
  final TextEditingController _controller = TextEditingController();
  List<GiphyImage> _gifs = [];
  bool _isLoading = false;

  Future<void> _searchGifs(String query) async {
    setState(() {
      _isLoading = true;
    });

    final client = GiphyClient(apiKey: apiKey);
    final searchResult = await client.search(query);

    if (mounted) {
      setState(() {
        _gifs = searchResult.data;
        _isLoading = false;
      });
    }

    client.close();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GIF Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Search for GIFs',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {
                    _searchGifs(_controller.text);
                  },
                ),
              ),
            ),
            Expanded(
              child: _isLoading
                  ? Center(child: CircularProgressIndicator())
                  : GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 8.0,
                        mainAxisSpacing: 8.0,
                      ),
                      itemCount: _gifs.length,
                      itemBuilder: (context, index) {
                        final gif = _gifs[index];
                        return Image.network(gif.url);
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

关键功能

  • 搜索 GIF:通过调用 client.search(query) 方法,可以根据关键词搜索 GIF。
  • 显示结果:将搜索到的 GIF 显示在一个网格布局中。
  • 加载指示器:在数据加载时显示进度条。

其他功能

除了搜索 GIF 外,你还可以使用 enough_giphy 进行其他操作,例如:

  • 获取趋势 GIF:

    final gifs = await client.trending();
    
  • 获取趋势贴纸:

    final stickers = await client.trending(type: GiphyType.stickers, rating: GiphyRating.pg13);
    
  • 获取表情符号:

    final emojis = await client.emojis();
    
  • 获取趋势搜索词:

    final trendingSearchTerms = await client.trendingSearchTerms();
    

更多关于Flutter GIF搜索与展示插件enough_giphy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GIF搜索与展示插件enough_giphy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用enough_giphy插件来搜索和展示GIF的示例代码。这个插件允许你从GIPHY API搜索GIF并在你的应用中展示它们。

首先,确保你已经在pubspec.yaml文件中添加了enough_giphy依赖:

dependencies:
  flutter:
    sdk: flutter
  enough_giphy: ^最新版本号  # 请替换为当前最新版本号

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

接下来,在你的Flutter项目中,你可以按照以下步骤来实现GIF搜索和展示功能:

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:enough_giphy/enough_giphy.dart';
  1. 设置GIPHY API密钥

在使用enough_giphy之前,你需要在GIPHY官网申请一个API密钥,并将其设置为全局变量或在初始化时传入。

// 将你的GIPHY API密钥替换为这里的'your_api_key'
const String apiKey = 'your_api_key';
  1. 创建搜索和展示GIF的页面
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GIF Search App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchGIFPage(),
    );
  }
}

class SearchGIFPage extends StatefulWidget {
  @override
  _SearchGIFPageState createState() => _SearchGIFPageState();
}

class _SearchGIFPageState extends State<SearchGIFPage> {
  final TextEditingController _searchController = TextEditingController();
  List<GiphyImage> _gifs = [];

  void _searchGIFs(String query) async {
    setState(() {
      _gifs = []; // 清空之前的搜索结果
    });

    try {
      final GiphyClient giphyClient = GiphyClient(apiKey: apiKey);
      final GiphyResponse response = await giphyClient.search(query: query, limit: 10);
      setState(() {
        _gifs = response.data!;
      });
    } catch (e) {
      print('Error searching GIFs: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GIF Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextField(
              controller: _searchController,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(),
                labelText: 'Search GIFs',
              ),
              onEditingComplete: () async {
                _searchGIFs(_searchController.text);
              },
            ),
            SizedBox(height: 16),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                ),
                itemCount: _gifs.length,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () {
                      // 可以在这里实现点击GIF后的动作,比如全屏展示
                      print('GIF tapped: ${_gifs[index].url}');
                    },
                    child: Image.network(
                      _gifs[index].images.fixedHeight.url,
                      fit: BoxFit.cover,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          _searchGIFs(_searchController.text);
        },
        tooltip: 'Search',
        child: Icon(Icons.search),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,它有一个搜索栏和一个GridView来展示搜索结果。当用户输入搜索词并点击搜索按钮(或通过完成编辑触发)时,应用会使用enough_giphy插件从GIPHY API搜索GIF,并在GridView中展示结果。

注意:

  • 请确保你已经替换了your_api_key为你的实际GIPHY API密钥。
  • 这个示例没有实现点击GIF后的全屏展示功能,你可以根据需要自行添加。

希望这个示例对你有帮助!

回到顶部