Flutter远程省份数据管理插件remote_province的使用

远程省份数据管理插件remote_province介绍

import 'package:remote_province/remote_province.dart';

省份是一个国家内的政治分区，通常用于联邦制或具有联邦政府体系的国家。而州则是一个通常拥有主权的政治实体，并且有明确的地理边界。

远程省份数据管理插件remote_province是一个用于在Dart中映射来自远程数据源的数据工具，类似于Elm的RemoteData。

使用案例

一个常见的使用场景是将remote_province映射到UI过渡或组件状态。以下是一个使用StateNotifier的例子。

counter/notifier/counter.dart

import 'package:remote_province/remote_province.dart';

class CounterNotifier extends StateNotifier<RemoteState<int>> {
  var _counterClient = CounterClient();

  CounterNotifier() : super(RemoteState.initial()) {
    getCount();
  }

  getCount() async {
    state = RemoteState.loading();

    state = await RemoteState.guard(() => _counterClient.getCount());
  }

  increment() async {
    state = await RemoteState.guard(() => _counterClient.increment());
  }

  decrement() async {
    state = await RemoteState.guard(() => _counterClient.decrement());
  }
}

main.dart

import 'package:remote_province/remote_province.dart';

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StateNotifierProvider<CounterNotifier, RemoteState<int>>.value(
        value: CounterNotifier(),
        child: HomePage(),
      ),
    );
  }
}

home.dart

import 'package:remote_province/remote_province.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 解析计数器通知器以更新状态
    var counterNotifier = Provider.of<CounterNotifier>(context);
    var counterState = Provider.of<RemoteState<int>>(context);

    var textStyle = Theme.of(context).textTheme.headline4;
    final fabPadding = EdgeInsets.symmetric(vertical: 5.0);

    return Scaffold(
      appBar: AppBar(
        title: Text('RemoteState with StateNotifier'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('你已经按下了按钮多少次：'),
            // 渲染状态变化
            counterState.when(
              initial: () => Text('未加载', style: textStyle),
              success: (value) => Text('$value', style: textStyle),
              loading: () => Text('加载中...', style: textStyle),
              error: (_) => Text('错误', style: textStyle),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: fabPadding,
            child: FloatingActionButton(
              heroTag: 'inc',
              child: Icon(Icons.add),
              // 执行增加操作
              onPressed: () => counterNotifier.increment(),
            ),
          ),
          Padding(
            padding: fabPadding,
            child: FloatingActionButton(
              heroTag: 'dec',
              child: Icon(Icons.remove),
              // 执行减少操作
              onPressed: () => counterNotifier.decrement(),
            ),
          ),
        ],
      ),
    );
  }
}

maybeWhen 方法

import 'package:remote_province/remote_province.dart';
var result = remoteState.maybeWhen(
  initial: () => "初始状态",
  loading: () => "正在加载",
  // 不需要处理成功和错误状态。
  orElse: () => "要么成功要么失败", // 通配符
);

API

RemoteState<T>

RemoteState<T> 用于标记您的请求变量。它将所有可能的请求状态封装在一个单一的联合类型中。使用参数指定。

• T: 成功值的类型。

RemoteState.initial

RemoteState.initial 是一个表示请求尚未发出的实例。

RemoteState.loading

RemoteState.loading 是一个表示请求已发出但尚未返回任何数据的实例。

RemoteState.success

RemoteState.success 是一个表示请求已完成并且新数据（类型为T）可用的实例。

RemoteState.error

RemoteState.error 是一个表示请求失败的实例。

RemoteState.guard

RemoteState.guard 是一个静态函数，它将Future转换为RemoteState。如果future失败，则会发出RemoteState.error；如果future完成，则会发出RemoteState.success。

高阶函数模式匹配

when

when 方法是一个高阶函数，接受每个状态的方法并将其与适当的回调函数匹配。所有回调都是必需的，不能为null。

maybeWhen

maybeWhen 方法是一个高阶函数，接受每个状态的方法并将其与适当的回调函数匹配，或者对于缺失的方法提供一个默认回调。只有orElse是必需的。

map

map 方法是when方法的等效版本，但没有解构。

maybeMap

maybeMap 方法是when方法的等效版本，但没有解构。

状态谓词

isInitial

isInitial 谓词返回是否我们尚未请求数据。

isLoading

isLoading 谓词返回是否我们正在加载。

isSuccess

isSuccess 谓词返回是否我们已成功加载某些数据。

isError

isError 谓词返回是否我们未能加载某些数据。

维护者

• Ryan Edge

参考资料

• 如何修复糟糕的用户界面
• 用Web组件和TypeScript消灭UI反模式
• 如何用Elm消灭UI反模式
• 用Angular消灭UI反模式
• 用Flow消灭UI反模式
• 用React消灭UI反模式
• 用Fantasyland消灭UI反模式

开发指南

1. 获取依赖

dart pub get

2. 运行测试

dart test

3. 代码生成（如freezed, json_serializable等）

dart pub run build_runner build

持续重建：

dart pub run build_runner watch

4. 代码分析

dart analyze

5. 格式化代码

dart format lib

6. 运行程序

dart run

7. 编译程序

dart compile exe <dart_file>

8. 发布包

dart pub publish

9. 发布

./scripts/prepare_release.sh