Flutter宝可梦API数据获取插件pokeapi_wrapper的使用

Flutter宝可梦API数据获取插件pokeapi_wrapper的使用

pokeapi_wrapper 是一个用 Dart 编写的用于访问 Poke API 的包装器。它支持 PokeAPI v2。

文档

完整的 API 文档可以在 Poke API 找到。

开始使用

要在你的项目中使用 pokeapi_wrapper，请将 pokeapi_wrapper 添加为 pubspec.yaml 文件中的依赖项。

import 'package:pokeapi_wrapper/pokeapi_wrapper.dart';

示例

以下是一个完整的示例，展示如何使用 pokeapi_wrapper 插件来获取并显示宝可梦列表及其详细信息。

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

void main() {
  PokeApi.useHiveAsLocalCache = true; // 否则它将使用 shared_preferences 作为本地缓存
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'PokeApi Demo',
      debugShowCheckedModeBanner: false,
      home: PokeApiDemoExample(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("PokeApi Demo")),
      body: const PokeApiDemoExampleBody(),
    );
  }
}

class PokeApiDemoExampleBody extends FutureBuilderWidget<List<PokemonApiResource>> {
  const PokeApiDemoExampleBody({super.key});

  [@override](/user/override)
  Future<Either<Error, List<PokemonApiResource>>> get future => PokeApi.getPokemonList();

  [@override](/user/override)
  Widget onWaiting(BuildContext context) => const Center(child: CircularProgressIndicator());

  [@override](/user/override)
  Widget onError(BuildContext context, Error error) => Text("Error: ${error.toString()}");

  [@override](/user/override)
  Widget onSuccess(BuildContext context, List<PokemonApiResource> value) => ListView.builder(
        itemExtent: 100.0, // 设置 itemExtent 是非常重要的，以便只调用可见项目的 itemBuilder
        itemCount: value.length,
        itemBuilder: (context, index) => PokeApiDemoExamplePokemon(pokemonApiResource: value[index]),
      );
}

class PokeApiDemoExamplePokemon extends FutureBuilderWidget<Pokemon> {
  final PokemonApiResource pokemonApiResource;
  const PokeApiDemoExamplePokemon({super.key, required this.pokemonApiResource});

  [@override](/user/override)
  Future<Either<Error, Pokemon>> get future => pokemonApiResource.getPokemon();

  [@override](/user/override)
  Widget onWaiting(BuildContext context) => const ListTile(leading: CircularProgressIndicator());

  [@override](/user/override)
  Widget onError(BuildContext context, Error error) => ListTile(leading: const Icon(Icons.error), title: const Text("Error", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)), subtitle: Text(error.toString()));

  [@override](/user/override)
  Widget onSuccess(BuildContext context, Pokemon value) => PokeApiDemoExamplePokemonSpecies(pokemon: value);
}

class PokeApiDemoExamplePokemonSpecies extends FutureBuilderWidget<PokemonSpecies> {
  final Pokemon pokemon;
  const PokeApiDemoExamplePokemonSpecies({super.key, required this.pokemon});

  [@override](/user/override)
  Future<Either<Error, PokemonSpecies>> get future => pokemon.species;

  [@override](/user/override)
  Widget onWaiting(BuildContext context) => Container(color: Colors.white);

  [@override](/user/override)
  Widget onError(BuildContext context, Error error) => Container(color: Colors.white);

  [@override](/user/override)
  Widget onSuccess(BuildContext context, PokemonSpecies value) => PokeApiDemoExamplePokemonColor(pokemon: pokemon, pokemonSpecies: value);
}

class PokeApiDemoExamplePokemonColor extends FutureBuilderWidget<PokemonColor> {
  final Pokemon pokemon;
  final PokemonSpecies pokemonSpecies;
  const PokeApiDemoExamplePokemonColor({super.key, required this.pokemon, required this.pokemonSpecies});

  [@override](/user/override)
  Future<Either<Error, PokemonColor>> get future => pokemonSpecies.color;

  [@override](/user/override)
  Widget onWaiting(BuildContext context) => Container(color: Colors.white);

  [@override](/user/override)
  Widget onError(BuildContext context, Error error) => Container(color: Colors.red, child: Text(error.toString()));

  [@override](/user/override)
  Widget onSuccess(BuildContext context, PokemonColor value) => Card(
        color: value.color?.withAlpha(200),
        child: ListTile(
          leading: Image.network(pokemon.sprites.officialArtWork),
          title: Text(pokemon.name, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
          subtitle: Wrap(spacing: 4, runSpacing: 4, children: pokemon.types.map((pokemonType) => PokeApiDemoExampleAbilityChip(pokemonType: pokemonType)).toList()),
        ),
      );
}

class PokeApiDemoExampleAbilityChip extends FutureBuilderWidget<Type> {
  final PokemonType pokemonType;
  const PokeApiDemoExampleAbilityChip({super.key, required this.pokemonType});

  [@override](/user/override)
  Future<Either<Error, Type>> get future => pokemonType.type;

  [@override](/user/override)
  Widget onWaiting(BuildContext context) => const Chip(label: CircularProgressIndicator());

  [@override](/user/override)
  Widget onError(BuildContext context, Error error) => Chip(label: Text("Error: ${error.toString()}"));

  [@override](/user/override)
  Widget onSuccess(BuildContext context, Type value) => Chip(label: Text(value.name));
}

更多关于Flutter宝可梦API数据获取插件pokeapi_wrapper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter宝可梦API数据获取插件pokeapi_wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 pokeapi_wrapper 插件来获取宝可梦API数据的Flutter代码案例。这个插件是一个对PokeAPI的封装，可以让你更方便地在Flutter应用中获取宝可梦相关的数据。

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

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

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

接下来是一个简单的Flutter应用示例，展示如何使用 pokeapi_wrapper 来获取宝可梦列表并显示它们的名字：

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

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

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

class PokeListScreen extends StatefulWidget {
  @override
  _PokeListScreenState createState() => _PokeListScreenState();
}

class _PokeListScreenState extends State<PokeListScreen> {
  List<String> pokemonNames = [];
  bool isLoading = true;

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

  Future<void> fetchPokemonNames() async {
    final PokeApi pokeApi = PokeApi();
    try {
      final response = await pokeApi.getPokemonList(limit: 20); // 获取前20个宝可梦
      setState(() {
        pokemonNames = response.results.map((poke) => poke.name).toList();
        isLoading = false;
      });
    } catch (e) {
      print('Error fetching data: $e');
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PokeAPI Demo'),
      ),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: pokemonNames.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(pokemonNames[index]),
                );
              },
            ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，包含一个 MyApp 和一个 PokeListScreen。
  2. 在 PokeListScreen 中，我们定义了一个 List<String> 来存储宝可梦的名字，以及一个 bool 来跟踪数据加载状态。
  3. 在 initState 方法中，我们调用 fetchPokemonNames 方法来获取宝可梦列表。
  4. fetchPokemonNames 方法使用 pokeapi_wrapper 插件的 PokeApi 类来获取宝可梦列表，并将结果映射为宝可梦的名字列表。
  5. 在 build 方法中，我们使用 ListView.builder 来显示宝可梦的名字列表，如果数据正在加载，则显示一个 CircularProgressIndicator。

这个示例展示了如何使用 pokeapi_wrapper 插件来获取并显示宝可梦API数据。你可以根据需要扩展这个示例，例如获取宝可梦的详细信息、图像等。

回到顶部