Flutter网络状态管理插件network_state_handler的使用

插件简介

network_state_handler 是一个简单友好的网络状态处理工具，用于管理请求的状态，例如初始状态、加载中状态、已加载状态或错误状态。您可以将其与任何喜欢的网络库（如 http 或 dio）一起使用。

安装

1. 在 pubspec.yaml 文件中添加依赖：

dependencies:
  network_state_handler: ^0.0.2

2. 运行以下命令以更新包依赖：

flutter pub get

导入

在您的代码中使用该插件时，首先需要导入：

import 'package:network_state_handler/network_state_handler.dart';

使用示例

以下是一个完整的示例代码，展示如何使用 network_state_handler 来管理网络请求的状态。

示例代码

import 'package:flutter/material.dart';
import 'package:network_state_handler/network_state_handler.dart';
import 'package:networking_freezed_dio/repos/api_repo.dart';
import 'model/list_user_response.dart';

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

class MyApp extends StatelessWidget {
  // 应用根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const ListUser(),
    );
  }
}

class ListUser extends StatefulWidget {
  const ListUser({Key? key}) : super(key: key);

  [@override](/user/override)
  _ListUserState createState() => _ListUserState();
}

class _ListUserState extends State<ListUser> {
  final APIRepository _apiRepository = APIRepository();
  ResultState<ListUserResponse> state = const ResultState.loading(); // 当前状态
  ResultState<bool> boolstate = const ResultState.loading();
  final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();

  // 获取用户列表
  Future<void> getUsers() async {
    ApiResult<ListUserResponse> apiResult = await _apiRepository.fetchListOfUser();

    apiResult.when(
      success: (ListUserResponse? user) {
        setState(() {
          state = ResultState.data(data: user); // 数据成功加载
        });
      },
      failure: (NetworkExceptions? error) {
        print(error.toString());
        setState(() {
          state = ResultState.error(error: error); // 加载失败
        });
      },
    );
  }

  // 删除用户
  Future<void> deleteUser(int userId) async {
    ApiResult<bool> apiResult = await _apiRepository.deleteUser(userId);

    apiResult.when(
      success: (bool? user) {
        setState(() {
          boolstate = ResultState.data(data: user); // 删除成功
        });
      },
      failure: (NetworkExceptions? error) {
        print(error.toString());
        setState(() {
          boolstate = ResultState.error(error: error); // 删除失败
        });
      },
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    getUsers(); // 初始化时获取数据
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldkey,
      body: SafeArea(
        child: state.when(
          idle: () => Container(), // 初始状态
          loading: () => const Center(child: CircularProgressIndicator()), // 加载中状态
          data: (ListUserResponse? data) {
            return data!.user!.isEmpty
                ? const Center(child: Text("No Data found")) // 没有数据时显示提示
                : ListView.separated(
                    itemCount: data.user!.length,
                    separatorBuilder: (_, __) => const Divider(),
                    itemBuilder: (ctx, index) => Dismissible(
                      key: ValueKey(data.user![index].id),
                      background: Container(
                        color: Colors.red,
                        alignment: Alignment.centerLeft,
                        child: const Icon(Icons.delete, color: Colors.white),
                      ),
                      onDismissed: (direction) async {
                        if (direction == DismissDirection.startToEnd) {
                          // 左滑删除
                          await deleteUser(data.user![index].id!);
                          data.user!.removeAt(index);
                          SnackBar snackBar = const SnackBar(
                            content: Text('Deleted Successfully'),
                          );
                          _scaffoldkey.currentState?.showSnackBar(snackBar);
                        }
                      },
                      direction: DismissDirection.startToEnd,
                      child: ListTile(
                        title: Text(data.user![index].first_name ?? ""),
                        subtitle: Text(data.user![index].email ?? ""),
                        leading: CircleAvatar(
                          backgroundImage: NetworkImage(data.user![index].avatar ?? ""),
                          radius: 30,
                        ),
                      ),
                    ),
                  );
          },
          error: (NetworkExceptions? error) {
            return Text(NetworkExceptions.getErrorMessage(error!)); // 错误状态
          },
        ),
      ),
    );
  }
}