Flutter启动配置插件flutter_boot的使用

Flutter启动配置插件flutter_boot的使用

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

功能

• 对生命周期感知的网络请求，基于Dio 封装。
• LiveData、ViewModel等实现 MVI
• Screen_Util及方法拓展(屏幕适配代码来自：flutter_screenutil)。
• EventBus
• InvokeController 组件间状态提升
• 组件
  • LayoutOnCreated ：首帧渲染完成回调
  • OverlayTier : 基于OverlayEntry的弹出层，可设置超时时间。可制作toast 与 弹框。
  • FadeEffect: 点击组件时有变淡效果。

开始

在 pubspec.yaml 文件中添加插件：

flutter pub add flutter_boot

LiveData

可观察状态变动：

// 定义待观察的状态
var liveCounter = LiveData.useState(0);

// 使用
liveCounter.watch((count) => Text('$count'));

// 更新状态
liveCounter.setState((v) {
  liveCounter.value = v + 1;
});

ViewModel

配合LiveData用于观察多个状态变化：

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

Widget 链式调用

链式调用，可减少嵌套。原理是使用拓展方法，用组件包裹当前组件、组件方法命名一般是组件类名的小写。

Expanded(
  flex: 1,
  child: GestureDetector(
    onTap: () => logI("----点击"),
    child: const Padding(
      padding: EdgeInsets.all(8),
      child: Text("假如我是文本按钮"),
    ),
  ),
),

24.verticalSpace, // 等同 SizedBox(height: 24,),

// 链式调用，减少嵌套。
"假如我是文本按钮"
    .text()
    .padding(const EdgeInsets.all(8))
    .gestureDetector(onTap: () => logI("----点击"))
    .expanded(1),

基础网络请求

基于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 State<HttpViewModelPage>
    with ViewModelScope {

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

  // ViewModel 初始化
  [@override](/user/override)
  List<ViewModel> useViewModels() {
    return [viewModel];
  }
  
  Future _onRefresh() async {
    viewModel.currentPage = 1;
    return viewModel.loadBiliBili();
  }
  // ...

  [@override](/user/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, value, child) {
                var records = viewModel.recordState.value;
                return ListView.separated(...);
              })),
    );
  }

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

示例代码

以下是完整的示例代码：

import 'package:example/event_bus_page.dart';
import 'package:example/hint_toast_loading_page.dart';
import 'package:example/http_view_model_page.dart';
import 'package:example/invoke_controller_page.dart';
import 'package:example/live_counter_page.dart';
import 'package:example/widget_chain_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_boot/boot.dart';
import 'package:flutter_boot/kits.dart';

import 'base_http_page.dart';
import 'live_view_model_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    systemEnabledUiMode(
        mode: SystemUiMode.manual,
        overlays: [SystemUiOverlay.top]).then((value) {
      SystemUiOverlayStyle style = SystemUiOverlayStyle.light.copyWith(
        statusBarColor: Colors.transparent,
        // 状态栏颜色
        systemNavigationBarColor: Colors.transparent,
        // 导航栏颜色
        systemNavigationBarIconBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.dark,
      );
      systemUIOverlayStyle(style);
    });
    return BootScope(
      builder: (context, child) {
        // 字体不跟随系统大小
        return MediaQuery(
            data: MediaQuery.of(context)
                .copyWith(textScaler: TextScaler.noScaling),
            child: MaterialApp(
              title: 'Flutter Demo',
              debugShowCheckedModeBanner: false,
              theme: ThemeData(
                colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
                useMaterial3: true,
              ),
              home: Builder(builder: (context) {
                return const MainPage();
              }),
            ));
      },
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class ItemAction {
  String title;
  Widget page;
  String des;

  ItemAction(this.title, this.des, this.page);
}

class _MainPageState extends State<MainPage> {
  var items = [
    ItemAction("基础网络请求", "基于Dio封装的基础网络请求。", const BaseHttpPage(title: "网络请求")),
    ItemAction(
        "计数器（LiveData）", "最简单使用方式", const CounterPage(title: "LiveData")),
    ItemAction("计数器（LiveData ViewModel）", "观察多个状态变化，主动最小单位刷新",
        const LiveViewModelPage(title: "LiveViewModel")),
    ItemAction("Model-View-Intent", "使用ViewModel实现MVI架构及对组件生命周期感知的网络请求。",
        const HttpViewModelPage(title: "Model-View-Intent")),
    ItemAction(
        "TimeOverlayTier",
        "For Toast & Loading",
        const HintToastDialogPage(
          title: "TimeOverlayTier",
        )),
    ItemAction(
        "EventBus",
        "event bus",
        EventBusPage(
          title: "EventBus",
        )),
    ItemAction(
        "InvokeController",
        "跨组件调用、状态提升",
        const StateControllerPage(
          title: "Invoke Controller",
        )),
    ItemAction(
        "组件链式调用",
        "减少嵌套",
        const WidgetChainPage(
          title: "Widget Chain",
        )),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.blue,
      appBar: AppBar(
        // backgroundColor: Colors.blue,
        title: const Text("FLUTTER_BOOT"),
      ),
      body: ListView.separated(
          itemCount: items.length,
          separatorBuilder: (context, index) {
            return const Divider(
              height: 1,
            );
          },
          itemBuilder: (context, index) {
            return InkWell(
              onTap: () async {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return items[index].page;
                }));
              },
              child: Container(
                padding:
                    const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          items[index].title,
                          style: const TextStyle(
                              fontSize: 16, color: Colors.black),
                        ),
                        const Spacer(),
                        const Icon(Icons.chevron_right)
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Text(items[index].des,
                          style: const TextStyle(
                              fontSize: 14, color: Colors.black54)),
                    )
                  ],
                ),
              ),
            );
          }),
    );
  }
}