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

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

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

Pexels REST 客户端用于 Dart。

使用

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

入门

// 导入 pexels_null_safety
import 'package:pexels_null_safety/pexels_null_safety.dart';

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

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

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

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

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

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

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

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

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

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

示例代码

// example/example.dart

// 导入 pexels_null_safety
import 'package:pexels_null_safety/pexels_null_safety.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 vid = await client.getVideo(id: 857251);
  print(vid.sources[0].link);

  // 搜索包含 "tree" 的照片
  var result = await client.searchPhotos("tree");
  var photoResult = result[0];
  print(photoResult.sources['original']!.link);

  // 搜索包含 "balloon" 的视频
  var result2 = await client.searchVideos("balloon");
  var videoResult = result2[0];
  print(videoResult.sources[0].link);

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

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用pexels_null_safety插件来获取和显示Pexels图片资源的代码示例。这个插件允许你从Pexels API中获取高质量的图片资源。

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

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

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

接下来，创建一个Flutter应用并在其中使用pexels_null_safety插件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Pexels Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final PexelsClient _pexelsClient = PexelsClient(apiKey: 'YOUR_PEXELS_API_KEY'); // 替换为你的Pexels API Key
  List<Photo> _photos = [];

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Pexels Demo'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: _photos.length,
        itemBuilder: (context, index) {
          final photo = _photos[index];
          return GridTile(
            child: Image.network(
              photo.src.original,
              fit: BoxFit.cover,
            ),
            footer: GridTileBar(
              backgroundColor: Colors.black45,
              title: Text(
                photo.photographer,
                style: TextStyle(color: Colors.white),
              ),
            ),
          );
        },
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 创建一个PexelsClient实例，并传入你的Pexels API Key。
  2. 在initState方法中调用_fetchPhotos函数来获取流行的图片。
  3. 使用GridView.builder来显示获取到的图片。

请确保你已经从Pexels官网获取了一个有效的API Key，并将其替换到'YOUR_PEXELS_API_KEY'的位置。

这个示例展示了如何使用pexels_null_safety插件来获取并显示Pexels上的图片。你可以根据需要进一步扩展这个示例，比如添加搜索功能、分页加载等。

回到顶部