Flutter响应状态管理插件flutter_response_status的使用

Flutter_response_status 是一个用于在 Dart 中标准化响应的包。

示例用法

class AuthRepositoryExternal {

  // 用户登录方法
  Future<ResponseStatus<String, UserModel>> signIn(String email, String password) async {
    try {
      // 假设服务器返回的响应结构如下：
      /*
       {
         requestStatus: true,
         actionStatus: true,
         message: "登录成功",
         code: "LOGIN_SUCCESS",
         data: { userCode: 1, userName: 'Danilo Santos', userEmail: 'danilocarsan@gmail.com' }
       }
      */

      // 使用Dio发起HTTP请求
      var dio = Dio();
      var endpoint = 'auth/sign/in';
      var response = await dio.post(endpoint, data: {
        UserModelLabels.userEmail: email,
        UserModelLabels.userPassword: password,
      });

      // 将JSON解析为Map
      Map<String, dynamic> json = convert.jsonDecode(response.data);

      // 将JSON转换为ResponseStatus对象
      ResponseStatus res = ResponseStatus.fromJson(json);

      // 创建一个新的ResponseStatus对象，用于处理数据
      var responseUserModel = res.copyWith<String, UserModel>();

      // 如果请求成功，则将数据解析为UserModel并设置到响应中
      if (res.status) {
        responseUserModel.setData(UserModel.fromJson(res.data));
      }

      return responseUserModel;
    } catch (e) {
      // 捕获异常并返回错误响应
      return ResponseStatus(false, false, "无法连接到服务器", code: "SERVER_ERROR", dataError: e);
    }
  }
}

void main() {
  AuthRepositoryExternal authRep = AuthRepositoryExternal();

  // 调用登录方法，并处理返回的响应
  authRep.signIn('danilocarsan@gmail.com', '123456').then((response) {
    print(response.status); // 是否请求成功
    print(response.requestStatus); // 请求是否成功发送
    print(response.actionStatus); // 业务逻辑是否执行成功
    print(response.message); // 返回的消息
    print(response.code); // 返回的状态码
    print(response.data); // 返回的数据
    print(response.data?.userEmail); // 提取用户邮箱
    print(response.dataError); // 错误信息
  });
}

代码说明

AuthRepositoryExternal 类封装了登录功能。
signIn 方法通过 HTTP POST 请求调用服务器接口，并接收 JSON 响应。
ResponseStatus 类用于标准化响应结构，包括 status、requestStatus、actionStatus、message、code 和 data 等字段。
UserModel 类用于解析返回的用户数据。
main 函数演示了如何调用 signIn 方法并打印返回的响应信息。

获取开始

要开始使用此插件，请确保已将 flutter_response_status 添加到项目的 pubspec.yaml 文件中：

dependencies:
  flutter_response_status: ^1.0.0

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

flutter pub get

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

ionicwang 1楼•15 天前

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

flutter_response_status 是一个用于 Flutter 的状态管理插件，它旨在帮助开发者更轻松地管理应用程序的状态，并响应不同的状态变化。这个插件通常用于处理异步操作（如网络请求、数据库查询等）的状态，并将这些状态反映到 UI 上。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_response_status: ^0.1.0  # 请使用最新版本

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

基本用法

flutter_response_status 提供了一个 ResponseStatus 类，用于表示异步操作的不同状态（如加载中、成功、失败等）。你可以使用它来管理你的状态，并在 UI 中根据不同的状态显示不同的内容。

1. 创建 ResponseStatus 对象

import 'package:flutter_response_status/flutter_response_status.dart';

final responseStatus = ResponseStatus();

2. 更新状态

在异步操作开始、成功或失败时，你可以更新 ResponseStatus 的状态：

void fetchData() async {
  responseStatus.setLoading(); // 设置为加载中状态

  try {
    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));
    
    // 假设操作成功
    responseStatus.setSuccess(data: 'Data fetched successfully!');
  } catch (e) {
    // 操作失败
    responseStatus.setError(error: e.toString());
  }
}

3. 在 UI 中使用状态

你可以根据 ResponseStatus 的状态来显示不同的 UI：

class MyWidget extends StatelessWidget {
  final responseStatus = ResponseStatus();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Response Status Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            responseStatus.when(
              initial: () => Text('Initial State - Tap the button to fetch data'),
              loading: () => CircularProgressIndicator(),
              success: (data) => Text('Success: $data'),
              error: (error) => Text('Error: $error'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Fetch Data'),
            ),
          ],
        ),
      ),
    );
  }
}