Flutter: GetX - state management / route management

[hhstore]

related:

• #313
• flutter 专题: Flutter
• Flutter: state management #227 : flutter 数据状态管理方案对比

[hhstore]

Flutter 数据状态管理: 基于 GetX

• 这是一个超赞的项目.
• 比所有其他 flutter 状态管理方案, 都好用.
• 起码在我看来, 这是正确的道路.

官方:

• https://github.com/jonataslaw/getx

脚手架:

• https://github.com/jonataslaw/get_cli
• 官方 cli 生成的模板, 推荐使用.
• cli 很完善.

docs:

• 简介-中文: https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md
• 状态管理
  • 包含与其他方案对比.
  • 写法: 声明变量方式
  • 引用变量
  • 状态管理 - 简单版
• 路由管理
• 依赖管理
• 其他扩展特性: 其他高级 API

特性:

• 数据状态管理方案: 超赞! 🚀🚀🚀🚀
• 路由跳转管理方案: 超级超级赞! 🚀🚀🚀🚀🚀 比其他垃圾, 强百倍! 之所以发现 GetX, 就源于各种糟糕的 route 管理方案.
• 依赖管理方案: 使用很灵活智能. 🚀🚀🚀
• 其他开箱即用的扩展功能. 参考官方文档介绍.

Ref:

• 示例: https://github.com/carnevalli/flutter-getx-tutorial/blob/master/lib/main.dart
• 示例: https://github.com/AppWithFlutter/getx_app
  • 一个特别好的示例. 完整使用 GetX 实现很多层面的功能.
• 结合官方项目示例.

About GetX:

• 目前全网对于 GetX 的使用介绍, 比较少. 中文社区更少.
• 但是, GetX 是个严重被低估的项目.
• flutter 官网关于状态管理, 只是简单的提了一下 GetX. 这 TM 的明显是藏了私心.
• 任何人, 只要使用一下 Provider 和 GetX, 都能立马发现, 前者, 比之后者, 是坨💩.
• Provider, 虽然没有 Redux 臭, 但是依然很繁琐, 没有摆脱要写一堆无聊的代码.

About 作者:

• https://github.com/jonataslaw
• 作者是很资深的工程师. 其个人简介, 写的很清楚.
  • 17年写代码经验
  • 2008年开始写前端.
  • 6年+ app 开发经验: ios/Android
  • 7年+ 后端经验: php/Python
• 所以项目质量, 毋庸置疑.
• 而且从 GetX 的使用体验上, 也确实证明了他的代码水平.
• so, 那就快乐的用起来.

一个例子学会 GetX:

• https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md
• 官方文档示例: 短小精悍. 几乎包含 GetX 最核心常用功能.
• 完整代码, 可参考: https://github.com/carnevalli/flutter-getx-tutorial/blob/master/lib/main.dart

数据类型定义简写:

• 简写:

搜索 github 关于 GetX 的应用代码:

• https://github.com/search?l=Dart&q=get_cli&type=Code

• eg: https://github.com/thriftshop-site/thriftshop

[hhstore]

GetX 核心功能点:

1. 数据状态管理:

• https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/state_management.md
• GetBuilder vs GetX vs Obx vs MixinBuilder

1.1 GetX:

• 数据定义:

final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;

// 自定义类 - 可以是任何类
final user = User().obs;

• 数据使用:

// controller
final count1 = 0.obs;
final count2 = 0.obs;
int get sum => count1.value + count2.value;

1.2 GetBuilder:

• [x]

GetBuilder<Controller>(
  init: Controller(),
  builder: (value) => Text(
    '${value.counter}', //here
  ),
),

• 使用:

class Controller extends GetxController {
  static Controller get to => Get.find();
[...]
}
//view
GetBuilder<Controller>(  
  init: Controller(), // 每个控制器只用一次
  builder: (_) => Text(
    '${Controller.to.counter}', //here
  )
),

1.3 Obx:

• [x]

1.4 MixinBuilder:

• [x]

2. 路由管理:

• 路由管理

2.1 Get 快捷写法:

Get.to(NextScreen());

Get.back();

Get.off(NextScreen());

Get.offAll(NextScreen());

var data = await Get.to(Payment());

Get.back(result: 'success');

if(data == 'success') madeAnything();

2.2 别名路由:

• 别名路由

Get.toNamed("/NextScreen");

Get.offNamed("/NextScreen");

Get.offAllNamed("/NextScreen");

• 处理404页面:

void main() {
  runApp(
    GetMaterialApp(
      unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
      ],
    )
  );
}

2.3 路由+参数:

• 发送数据到别名路由
• 动态网页链接

2.4 路由中间件:

• 中间件

2.5 特殊扩展:

SnackBars:

• https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/route_management.md#snackbars

Get.snackbar(
  "Hey i'm a Get SnackBar!", // title
  "It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // message
  icon: Icon(Icons.alarm),
  shouldIconPulse: true,
  onTap:(){},
  barBlur: 20,
  isDismissible: true,
  duration: Duration(seconds: 3),
);

Dialogs:

• https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/route_management.md#dialogs

Get.dialog(YourDialogWidget());

Get.defaultDialog(
  onConfirm: () => print("Ok"),
  middleText: "Dialog made in 3 lines of code"
);

BottomSheets:

• https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/route_management.md#bottomsheets

Get.bottomSheet(
  Container(
    child: Wrap(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.music_note),
          title: Text('Music'),
          onTap: () => {}
        ),
        ListTile(
          leading: Icon(Icons.videocam),
          title: Text('Video'),
          onTap: () => {},
        ),
      ],
    ),
  )
);

嵌套导航:

• 不建议使用特性(内存开销) 嵌套导航

• 尽量不要使用

3. 依赖管理:

• https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/dependency_management.md

3.1 实例方法

• Get.put()

Controller controller = Get.put(Controller()); 

• Get.put()

Get.put<SomeClass>(SomeClass());
Get.put<LoginController>(LoginController(), permanent: true);
Get.put<ListItemController>(ListItemController, tag: "some unique string");

• Get.lazyPut

///只有当第一次使用Get.find<ApiMock>时，ApiMock才会被调用。
Get.lazyPut<ApiMock>(() => ApiMock());

Get.lazyPut<FirebaseAuth>(
  () => {
  // ... some logic if needed
    return FirebaseAuth()
  },
  tag: Math.random().toString(),
  fenix: true
)

Get.lazyPut<Controller>( () => Controller() )

3.2 Bindings

• https://github.com/jonataslaw/getx/blob/master/documentation/zh_CN/dependency_management.md#bindings

[hhstore]

如何使用 GetX ?

• 官方 repo 示例: https://github.com/jonataslaw/getx/tree/master/example
  • 这个例子, 给了如何使用 GetX 初始化.

1. 路由管理:

• https://github.com/Solido/awesome-flutter#navigation
  • 对比其他路由方案, 优雅太多.
• 使用 Get.to(page) 这种方式, 做页面跳转, 超级赞. 其他方案, 对比下来, 都是狗屎.
• 完全不需要定义一堆的 route 映射表, 只有根页面需要定义1条.
• 其他地方, 随用随 Get.to() 跳转路由. 非常灵活干净.
• 对比 auto_route, 每次加一个 page, 都要去定义路由, 很煞笔. 且 route gen 的工具, 超级慢.

2. 数据状态管理:

• GetX 对于数据的管理方式, 恰恰是我最想要的. 自然/丝滑/优雅.
• GUI 编程就应该是这样写数据管理.

关于 ReactiveX 编程范式:

• http://reactivex.io/
• https://github.com/ReactiveX
• 这个很 RxDart 的思路. 很赞的设计.
• ReactiveX: 响应式编程/流式编程. 其他语言, 比较流行的由 RxJava, RxJs, RxGo 等.
• 这是一种 GUI 编程的范式. 更适合写 GUI 的代码.
• 对于 java/go 等服务端编程, 实际体验, 一般.

目前使用 GetX:

• 路由管理
• 数据状态管理.
• 其他功能待继续使用.

Tips:

• 根据官方文档和 usage 示例. 就可以用起来.
• 边用, 边了解细节.
• GetX 的使用非常简单.

[hhstore]

官方示例:

• https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md/

• 这个示例包含了一切.
• 几乎日常使用的功能, 都在这个短小的例子里.

[hhstore]

FAQ:

• 目前使用下来, 发现一些小问题.
• 也不算问题, 这是不同方案之间的冲突性.

Q1: vs Provider:

• https://github.com/rrousselGit/provider
• GetX 和 Provider 的冲突点, 在如果使用 GetX.
• 那么在 根页面, 就是 runApp(MyApp()); 这里, 无法使用 Provider, 其他页面, 可以一起使用.
  • 这个不会造成使用障碍, 你只要不在根页面, 使用 Provider 就好, 不存在一定需要在根页面使用 Provider 的场景.
• 你可以在其他页面, 继续使用 Provider. 但实际上没必要啊. 哈哈. (兼顾遗留代码)

Q2: vs RxDart:

• https://github.com/ReactiveX/rxdart
• 最开始我以为 GetX 是基于 RxDart.
• 结果粗看源码, 发现并没有依赖 rxdart 包.
• 源码似乎是自己实现了一套 rxdart. 因为未细看, 待确认更多细节.

Q2: GetMaterialApp() 的坑:

• 注意: GetMaterialApp() 内部无法使用 builder 参数来创建 页面.
• 你从报错提示中, 可以看到提醒. 官方 issue, 也有回复. 见:

Q3: vs auto_route 冲突:

• 使用 GetX, 就可以弃用 其他 route 方案.
• Get.to(page) 方式, 实在是丝滑.
• 冲突原因是, auto_route 依赖在 MaterialApp.builder() 这种方式初始化. 因为 GetX 与此冲突.
• 间接导致 auto_route 不可用. 不过没所谓, 因为由 GetX, 就不需要 auto_route.
• auto_ruote 虽然可以自动生成路由代码, 但是, 代码多了之后, 非常慢! 忍无可忍的慢!.

Q4: 关于 嵌套路由:

• 多提一句. flutter 是不建议嵌套路由的. 这样会由内存开销.
• 所以不要嵌套. 直接平铺.
• 页面路由: /a/b/c 这种方式, 改成 /a-b-c 平铺就好.

[hhstore]

1

[hhstore]

xxxxxx:

xxxxxxxxxxxxxx	xxxxxxxxxxxxxx	xxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx
xxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxx	xxxxxxxxxx