Flutter状态管理与API请求插件simple_getx_with_api的使用

simple_getx_with_api简介

simple_getx_with_api 是一个用于 Flutter 的插件项目，它结合了状态管理和 API 请求的功能。通过该插件，开发者可以轻松地在 Flutter 应用中实现数据的状态管理以及从远程服务器获取数据。

simple_getx_with_api使用步骤

1. 创建一个新的 Flutter 项目

首先，创建一个新的 Flutter 项目：

flutter create simple_getx_with_api_example

进入项目目录：

cd simple_getx_with_api_example

2. 添加依赖

在 pubspec.yaml 文件中添加必要的依赖项，例如 get（用于状态管理）和 http（用于网络请求）。

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5 # GetX 状态管理库
  http: ^0.15.0 # HTTP 请求库

然后运行以下命令以安装依赖：

flutter pub get

3. 配置插件

在 lib/main.dart 中配置插件并实现状态管理与 API 请求。

示例代码

// lib/main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart'; // 导入 GetX
import 'package:http/http.dart' as http; // 导入 HTTP 请求库

// 定义一个简单的模型类
class User {
  final int id;
  final String name;

  User({required this.id, required this.name});

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

// 定义一个控制器来管理状态和 API 请求
class UserController extends GetxController {
  var isLoading = true.obs; // 加载状态
  var user = Rx<User?>(null); // 用户数据

  @override
  void onInit() {
    super.onInit();
    fetchUser(); // 初始化时自动加载数据
  }

  Future<void> fetchUser() async {
    isLoading.value = true; // 设置加载状态为 true
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users/1'));

      if (response.statusCode == 200) {
        // 将 JSON 数据解析为 User 对象
        user.value = User.fromJson(response.bodyAsJson);
      } else {
        throw Exception('Failed to load user');
      }
    } catch (e) {
      print(e);
    } finally {
      isLoading.value = false; // 设置加载状态为 false
    }
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final UserController userController = Get.put(UserController()); // 注册控制器

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX + API 示例'),
      ),
      body: Obx(() {
        if (userController.isLoading.value) {
          return Center(child: CircularProgressIndicator()); // 显示加载动画
        } else {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('用户 ID: ${userController.user.value?.id ?? '未知'}'),
              Text('用户名: ${userController.user.value?.name ?? '未知'}'),
            ],
          );
        }
      }),
    );
  }
}

4. 运行应用

确保设备或模拟器已连接，然后运行以下命令启动应用：

flutter run

更多关于Flutter状态管理与API请求插件simple_getx_with_api的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter状态管理与API请求插件simple_getx_with_api的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_getx_with_api 是一个基于 GetX 的 Flutter 插件，旨在简化状态管理和 API 请求的流程。它结合了 GetX 的强大状态管理功能和简单的 API 请求封装，使得开发者可以更轻松地处理网络请求和状态管理。

安装

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

dependencies:
  flutter:
    sdk: flutter
  simple_getx_with_api: ^1.0.0  # 请使用最新版本

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

基本用法

1. 创建 API 服务

首先，你需要创建一个 API 服务类，继承自 ApiService，并定义你的 API 请求方法。

import 'package:simple_getx_with_api/simple_getx_with_api.dart';

class UserService extends ApiService {
  UserService() : super(baseUrl: "https://jsonplaceholder.typicode.com");

  Future<ResponseModel<List<User>>> getUsers() async {
    return await get("/users", decoder: (json) => List<User>.from(json.map((x) => User.fromJson(x))));
  }

  Future<ResponseModel<User>> getUserById(int id) async {
    return await get("/users/$id", decoder: (json) => User.fromJson(json));
  }
}

2. 创建模型类

定义你的数据模型类，通常使用 json_serializable 或手动解析 JSON。

class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

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

3. 创建控制器

使用 GetX 的 GetxController 来管理状态和调用 API 服务。

import 'package:get/get.dart';
import 'user_service.dart';
import 'user_model.dart';

class UserController extends GetxController {
  final UserService _userService = UserService();

  var users = <User>[].obs;
  var isLoading = true.obs;

  [@override](/user/override)
  void onInit() {
    fetchUsers();
    super.onInit();
  }

  void fetchUsers() async {
    try {
      isLoading(true);
      var response = await _userService.getUsers();
      if (response.success) {
        users.value = response.data!;
      } else {
        Get.snackbar("Error", response.message);
      }
    } finally {
      isLoading(false);
    }
  }
}

4. 在 UI 中使用控制器

在 Flutter 的 UI 中，你可以使用 GetX 的 Obx 或 GetBuilder 来监听状态变化并更新 UI。

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

class UserPage extends StatelessWidget {
  final UserController userController = Get.put(UserController());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Users"),
      ),
      body: Obx(() {
        if (userController.isLoading.value) {
          return Center(child: CircularProgressIndicator());
        } else {
          return ListView.builder(
            itemCount: userController.users.length,
            itemBuilder: (context, index) {
              var user = userController.users[index];
              return ListTile(
                title: Text(user.name),
                subtitle: Text(user.email),
              );
            },
          );
        }
      }),
    );
  }
}
回到顶部