Flutter图片资源获取插件pexels_api的使用

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

Flutter图片资源获取插件pexels_api的使用

使用

要使用此库，在您的pubspec.yaml文件中添加pexels作为依赖项。

开始使用

// 导入 pexels
import "package:pexels/pexels.dart";

// 创建客户端实例
var client = PexelsClient('your_key_here');

// 通过ID获取照片
PexelsPhoto photo = await client.getPhoto(id);

// 获取随机照片
PexelsPhoto photo = await client.getPhoto();    // 注意getPhoto方法未传参数。

// 获取照片的URL
String photoUrl = photo.sources['original'].link
// 等价于：
String photoUrl = photo.get(ImageFormats.original);

// 搜索照片
SearchResult<PexelsPhoto> result = await client.searchPhotos(query, collection: PexelsCollection.Popular, page: 1, resultsPerPage: 15);
PexelsPhoto photo = result[0]; // 获取找到的第一张照片。

// 搜索仅限肖像的照片
SearchResult<PexelsPhoto> result = await client.searchPhotos(query, collection: PexelsCollection.Regular, orientation: PexelsPhotoOrientation.portrait);
PexelsPhoto photo = result[0]; // 获取找到的第一张照片。

// 通过ID获取视频
PexelsVideo video = await client.getVideo(id);

// 获取随机视频
PexelsVideo video = await client.getVideo();    // 注意getVideo方法未传参数。

// 获取视频源URL
String videoUrl = video.sources[0].link;
// 等价于：
String videoUrl = video.get(0);

// 搜索视频
SearchResult<PexelsVideo> result = await client.searchVideos(query, collection: PexelsCollection.Regular, page: 1, resultsPerPage: 15);
PexelsVideo video = result[0]; // 获取找到的第一个视频。

// 获取配额 - 包含有关API使用情况的统计数据。
Quota quota = await client.getQuota();

示例代码

以下是一个完整的示例代码：

// 导入 pexels
import "package:pexels/pexels.dart";

void main() async {
  // 创建客户端实例
  var client = PexelsClient('your_key_here');

  // 获取随机照片并打印小尺寸的链接
  var photo = await client.getPhoto();
  var link = photo.get(ImageFormats.small);
  print(link);

  // 通过ID获取视频并打印第一个源的链接
  var video = await client.getVideo(id: 857251);
  print(video.get(0));

  // 搜索包含关键词 "tree" 的照片并打印第一张照片的原始链接
  var result = await client.searchPhotos("tree");
  var photoResult = result[0];
  print(photoResult.get(ImageFormats.original));

  // 搜索包含关键词 "balloon" 的视频并打印第一个视频的链接
  var videoResult = await client.searchVideos("balloon");
  var videoResultItem = videoResult[0];
  print(videoResultItem.get(0));

  // 获取当前配额信息
  var quota = await client.getQuota();
  print(quota);
}

更多关于Flutter图片资源获取插件pexels_api的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片资源获取插件pexels_api的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用pexels_api插件来获取和显示图片资源的代码示例。pexels_api插件允许你访问Pexels的图片库，并轻松地在你的Flutter应用中集成这些图片。

首先，你需要在你的pubspec.yaml文件中添加pexels_api依赖：

dependencies:
  flutter:
    sdk: flutter
  pexels_api: ^latest_version  # 请替换为实际的最新版本号

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

接下来，你需要创建一个API密钥。你可以通过访问Pexels API文档并注册一个账户来获取API密钥。

以下是一个完整的Flutter应用示例，展示如何使用pexels_api插件来获取和显示图片：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PexelsApi? _pexelsApi;
  List<Photo>? _photos;

  @override
  void initState() {
    super.initState();
    // 替换为你的API密钥
    final String apiKey = 'YOUR_API_KEY';
    _pexelsApi = PexelsApi(apiKey: apiKey);
    _fetchPhotos();
  }

  Future<void> _fetchPhotos() async {
    try {
      final List<Photo> photos = await _pexelsApi!.getPopularPhotos(perPage: 10);
      setState(() {
        _photos = photos;
      });
    } catch (e) {
      print('Error fetching photos: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pexels API Example'),
        ),
        body: _photos == null
            ? Center(child: CircularProgressIndicator())
            : GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 4.0,
                  mainAxisSpacing: 4.0,
                ),
                itemCount: _photos!.length,
                itemBuilder: (context, index) {
                  final Photo photo = _photos![index];
                  return Image.network(photo.src.original);
                },
              ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了必要的包。
  2. 在MyApp类中，我们初始化了PexelsApi实例，并替换为你的API密钥。
  3. 在initState方法中，我们调用_fetchPhotos方法来获取流行的图片。
  4. _fetchPhotos方法使用getPopularPhotos函数从Pexels API获取图片，并将结果存储在_photos列表中。
  5. 在build方法中，我们检查_photos列表是否为空。如果为空，则显示一个加载指示器；否则，我们使用GridView.builder来显示图片。

请确保将YOUR_API_KEY替换为你从Pexels获得的API密钥。这个示例展示了如何获取并显示图片，但你可以根据需要进一步自定义和扩展这个应用。

回到顶部