flutter_status_widget 0.0.7

flutter_status_widget: ^0.0.7 copied to clipboard

flutter_status_widget是状态管理界面切换的自定义控件（Widget），控件支持四种状态的切换，并且支持全局设置各个状态的默认页面 / 单个状态界面设置 / 自定义内容回调等;

状态如下：

• Loading（加载中）
• Success （成功）
• Error（错误）
• Empty （无数据）

使用方式 #

添加依赖 #

dependencies:
  flutter_status_widget: ^0.0.7

使用步骤 #

1. 定义状态页样式

class StatusHolder extends StatefulWidget {
  final String text;
  final IconData icon;
  final StatusHolderController controller;

  StatusHolder({Key? key,required this.text, required this.icon})
      : controller =
            StatusHolderController(StatusHolderValue(text: text, icon: icon)),
        super(key: key);

  @override
  State<StatusHolder> createState() => _StatusHolderState();
}

class _StatusHolderState extends State<StatusHolder> {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(widget.controller.icon, size: 60.w, color: Colors.blue),
          vb(15.h),
          getMyText(widget.controller.text, 18.sp, Colors.lightBlue),
        ],
      ).center(),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}

class StatusHolderController extends ValueNotifier<StatusHolderValue> {
  StatusHolderController(value) : super(value);

  String get text => value.text ?? "";

  IconData get icon => value.icon ?? Icons.error;

  set text(String text) {
    value = value.copyWith(text: text);
  }

  set icon(IconData icon) {
    value = value.copyWith(icon: icon);
  }
}

class StatusHolderValue {
  String? text;
  IconData? icon;

  StatusHolderValue({this.text, this.icon});

  StatusHolderValue copyWith({String? text, IconData? icon}) {
    return StatusHolderValue(text: text ?? this.text, icon: icon ?? this.icon);
  }
}

2. 初始化StatusConfig

库内未设置任何默认状态页样式，需要全局设置或者单独在页面内设置

 ///ScInstance是StatusConfig单例的别名
 
 scInstance.loading = () => StatusHolder(text: "加载中", icon: Icons.stream);
 
 scInstance.error =
      () => StatusHolder(text: "网络错误", icon: Icons.running_with_errors);
      
 scInstance.empty =
      () => StatusHolder(text: "暂无数据", icon: Icons.hourglass_empty);

3. 使用StatusLayout

class _StatusUpdatingPageState extends State<StatusUpdatingPage> {

  ///定义状态控制器
  final StatusController _controller = StatusController(onError: (ctrl, data) {
    var widget = ctrl.currentWidget as StatusHolder;
    widget.controller.text = data.toString();
  });

 ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getMyAppBarNew(context, "状态页切换"),
      body: Column(
        children: [
          StatusLayout(
            controller: _controller,
            child: getMyText("我是成功页面", 20.sp, Colors.black).center(),
          ).expanded(1),
        ],
      ).click(update),
    );
  }
        

4. 调用控制器切换状态

void update() {
    Future.value(1)
        ///切换加载中
        .then((value) => _controller.showLoading())
        ///延迟2秒后显示Error页面
        .then((value) => Future.delayed(const Duration(seconds: 2)))
        .then((value) => _controller.showError(data: Random().nextInt(100)))
        ///延迟2秒后显示Empty页面
        .then((value) => Future.delayed(const Duration(seconds: 2)))
        .then((value) => _controller.showEmpty())
        ///延迟3秒后显示成功页面
        .then((value) => Future.delayed(const Duration(seconds: 3)))
        .then((value) => _controller.showSuccess());
  }

功能说明 #

以下对各个可配置内容进行说明

Status #

默认状态值，全局设置中切勿重复设置，独立页面设置中可覆盖

class Status {
  static const success = 0x01;
  static const loading = 0x02;
  static const error = 0x03;
  static const empty = 0x04;
}

StatusConfig #

StatusConfig是一个全局单例类，保存除成功状态的各个状态页Creator方法，以及全局初始状态等。

StatusLayout #

各个状态页容器，其内可单独配置各个状态页，其优先级比全局设置的高

StatusController #

控制器控制各个状态变化， 并且接收各个状态变化时回调