flutter_boot 0.2.0

Quickly develop Flutter App's MVI framework, encapsulate Dio network requests, and convenient tools.

快速开发Flutter App 的MVI框架、封装Dio网络请求及便捷工具。

功能

• 对生命周期感知的网络请求，基于Dio 封装。
• LiveData、ViewModel等实现 MVI
• 便捷工具及方法拓展。
• 组件
  • LayoutOnCreated ：首帧渲染完成回调
  • OverlayTier : 基于OverlayEntry的弹出层，可设置超时时间。可制作toast 与 弹框。
  • FadeEffect: 点击组件时有变淡效果。

开始

flutter pub add flutter_boot

ViewModel

配合ViewModelStateBuilder用于观察多个状态变化。

// 可观察多个状态变化 ， 如果仅观察一个，可使用 SingleLiveDataBuilder
LiveDataBuilder(
    //状态，要观察的 view model 的状态
    observe: [viewModel.stateCounter],
    builder: (context, child) {
    var counterValue = viewModel.stateCounter.value;
    
    return Text(
    // 计数
    '${counterValue.num}',
    style: Theme.of(context)
            .textTheme
            .headlineMedium
            ?.copyWith(color: counterValue.color),
    );
}),

基础网络请求

基于Dio封装的网络请求，简化请求参数。

  void _clickRequest() async {
  showLoadingDialog(context);
  //哔哩哔哩每周必看
  var param = Param.url("https://tenapi.cn/v2/{id}")
          .tie("num", 120, type: ParamType.query) // query 参数
          .tie("id", "weekly", type: ParamType.path); //path 参数

  //网络请求
  AnHttp.anHttp<String>(param, method: HttpMethodType.get).then((value) {
    var jsonMap = jsonDecode(value.data!);
    var bili = BaseModel<BiliBili>.fromJson(
            jsonMap, (json) => BiliBili.fromJson(json));

    if (bili.data != null) {
      setState(() {
        recordCount = bili.data?.list.length ?? 0;
      });
    }
    dismissLoadingDialog(context);
  }).catchError((err) {
    print("------err:${err}");
  });
}

MVI实现

参考样例.

//class _HttpViewModelPageState extends ViewModelState<HttpViewModelPage> { 
//或
class _HttpViewModelPageState extends State<HttpViewModelPage>
    with ViewModelScope {

  late var viewModel = HttpPageViewModel();
  var scrollerController = ScrollController();

  //ViewModel 初始化
  @override
  List<ViewModel> useViewModels() {
    return [viewModel];
  }
  
  Future _onRefresh() async {
    viewModel.currentPage = 1;
    return viewModel.loadBiliBili();
  }
  // ...
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RefreshIndicator(
          key: _refreshKey,
          onRefresh: _onRefresh,
          child: LiveDataBuilder(
              observe: [viewModel.recordState],// 监听状态
              builder: (context, child) {
                var records = viewModel.recordState.value;
                return ListView.separated(...);
              })),
    );
  }

  Widget itemWidget(BuildContext context, BiliBiliRecord item, bool last) {
    return Container(...);
  }
}