Flutter GetX 实战教程：从 OpenSea API 获取和展示数据

一. 什么是 Flutter GetX？

Flutter 提供了多种状态管理方案，包括 Provider、GetX、Bloc、Riverpod 和 Mobx 等。其中，GetX 不仅是一个状态管理库，它还集成了依赖注入和路由管理功能，是一个轻量级微框架。GetX 以其高效、简洁的特性，为开发者提供了卓越的开发体验。

二. 使用 GetX 从 OpenSea API 获取数据的步骤

在本教程中，我们将通过以下步骤，使用 Flutter 和 GetX 从 OpenSea API 获取数据：

在 pubspec.yaml 文件中添加所需依赖包。
根据 API 返回的数据结构创建数据模型。
创建 GetX 控制器并通过 HTTP 包发起网络请求。
将获取的数据以适当的格式展示在 UI 中。

1. 第一步：添加依赖包

在项目的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  http: ^0.15.0

然后运行命令安装依赖：

flutter pub get

2. 第二步：创建数据模型

根据 OpenSea API 返回的 JSON 数据结构，创建 Dart 数据模型。例如，API 返回的数据如下：

{
  "id": "1",
  "name": "CryptoPunk",
  "image_url": "https://example.com/image.png"
}

可以创建模型类：

class OpenSeaModel {
  final String id;
  final String name;
  final String imageUrl;

  OpenSeaModel({required this.id, required this.name, required this.imageUrl});

  factory OpenSeaModel.fromJson(Map<String, dynamic> json) {
    return OpenSeaModel(
      id: json['id'],
      name: json['name'],
      imageUrl: json['image_url'],
    );
  }
}

3. 第三步：创建 GetX 控制器并发起网络请求

创建 GetX 控制器，从 OpenSea API 获取数据：

import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class OpenSeaController extends GetxController {
  var items = <OpenSeaModel>[].obs;
  var isLoading = true.obs;

  Future<void> fetchItems() async {
    try {
      isLoading(true);
      final response = await http.get(Uri.parse('https://api.opensea.io/api/v1/assets'));
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        items.value = (data['assets'] as List)
            .map((item) => OpenSeaModel.fromJson(item))
            .toList();
      } else {
        throw Exception('Failed to load data');
      }
    } catch (e) {
      print('Error: $e');
    } finally {
      isLoading(false);
    }
  }
}

4. 第四步：展示数据

在 UI 中使用 Obx 小部件动态展示数据：

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

class OpenSeaView extends StatelessWidget {
  final OpenSeaController controller = Get.put(OpenSeaController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OpenSea Assets')),
      body: Obx(() {
        if (controller.isLoading.value) {
          return Center(child: CircularProgressIndicator());
        }
        return ListView.builder(
          itemCount: controller.items.length,
          itemBuilder: (context, index) {
            final item = controller.items[index];
            return ListTile(
              leading: Image.network(item.imageUrl),
              title: Text(item.name),
              onTap: () => _launchInBrowser(item.imageUrl),
            );
          },
        );
      }),
    );
  }

  void _launchInBrowser(String url) async {
    // 使用 url_launcher 打开链接
  }
}

三. 总结

本文介绍了如何使用 Flutter 和 GetX 从 OpenSea API 获取数据并展示：

添加必要依赖包。
根据 API 数据创建 Dart 模型。
创建 GetX 控制器并发起网络请求。
使用 Obx 小部件动态展示数据。

通过学习，你能够熟练地使用 Flutter 和 GetX 与 API 交互，并在应用中展示数据。

原文链接: https://pieces.app/blog/flutter-getx-fetching-data-from-opensea-api