Flutter Tools使用实践 2022-10-29 周六

创建app

• 在lib文件夹邮件，在弹出的菜单中选择 Create GetX App Structures，就会创建app目录结构

企业微信截图_d808f637-37ba-4f92-b34d-6bc52084b760.png

• 生成的main有点问题，不过思路还是可以的。改回原来的就行。生成了文件夹目录，其中的app，modules，routes是有用的。其他的，看着办，感觉好就用，感觉不好就删除了。

企业微信截图_5eb477e5-f337-45de-b59d-96094383c01e.png

• 自动生成了首页，自动生成了route文件。这两个模板可以参考。

• GetX的路由有命名路由和普通路由两种。在大多数情况下，只需要普通路由就可以了，相当于原生里面的代码动态跳转。不过有些时候，命名路由也是有优势的，就像iOS中的故事版，可以让整个app的骨架清晰。因此，准备尝试以命名路由为主，普通路由为辅的方式。这个插件是为数不多的能够生成路由模板代码的插件。

路由模板

• 整个的路由文件app_pages.dart

import 'home_routes.dart';

class AppPages {
  AppPages._();

  static const INITIAL = '/home';

  static final routes = [
    ...HomeRoutes.routes,
  ];
}

作用是把各模块的路由数组拼接为一个大的路由数组。这个模块划分方法还好很好的。

• 首页模块路由文件home_routes.dart

class HomeRoutes {
  HomeRoutes._();

  static const home = '/home';

  static final routes = [
    GetPage(
      name: home,
      page: () => const HomePage(),
      binding: HomeBinding(),
    ),
  ];
}

静态变量定义，GetPage数组都有，很好的模板。

• 每个模块也分为page，Controller，binding三个文件

企业微信截图_ea9c3a2a-545e-4bb5-b4da-49438b62a770.png

虽然比现在用的模式多了一个binding文件，但是对于命名路由来说，将bind独立出来还是很好的。

创建页面

• 右键菜单，Create GetX Feature，就是创建页面

企业微信截图_f3a02b66-528e-4d55-8881-f9b8aa6e9550.png

• 一般来说，程序启动后的第一个页面应该是闪屏页，而不是首页。

就算不做任何事，这个splash页面也会闪一下，没有广告的话，还是不加入为好。直接把首页设置为初始页面就可以了。

• 三个文件，以及路由文件都自动生成了，还是比较方便的。

企业微信截图_d47b3559-fdba-4201-9bb5-8fa27f37b67e.png

服务初始化的内容放哪里？

• 比如初始化firebase，初始化本地缓存等等一些内容，需要一个代码执行的地方

• 放在页面中，比如首页，splash页，感觉都不合适。

• Flutter Tools自动生成的文件中，有个ApplicationBindings，感觉可以在这里做服务的初始化工作。

企业微信截图_c426e243-2e2b-4ceb-bf27-daa02f9906c0.png

企业微信截图_6b1a14a8-6fdb-41db-92b7-446fa5bf274b.png

• 做了一个实现，在ApplicationBindings等待5s，看执行流程。页面把splash当初始页，什么也不做，直接去首页。从log来看，ApplicationBindings中方法的执行不会阻塞主流程的页面展示。

class ApplicationBindings extends Bindings {
  @override
  void dependencies() async {
    /// 这里的执行不会阻塞主流程页面展示
    /// 可以考虑在这里做服务，数据等的初始化工作
    debugPrint('before wait');
    await Future.delayed(const Duration(milliseconds: 5000));
    debugPrint('after wait');
  }
}

log如下：可以看到异步的效果

flutter: before wait

[GETX] Instance "GetMaterialController" has been created

[GETX] Instance "GetMaterialController" has been initialized

[GETX] GOING TO ROUTE /splash

[GETX] Instance "SplashController" has been created

[GETX] Instance "SplashController" has been initialized

[GETX] REPLACE ROUTE /splash

[GETX] NEW ROUTE /home

[GETX] "SplashController" onDelete() called

[GETX] "SplashController" deleted from memory

[GETX] Instance "SplashController" already removed.

flutter: after wait

小结

• 极简模式，还是page和logic两个文件那种最方便。

• 如果想使用GetView，命名路由，那么用Flutter Tools这个插件还是挺方便的。

• 看官网的介绍，GetView还是可以尝试一下的。用一个单独的binding文件来做注入的事情，解耦更彻底一点。

企业微信截图_c1bcb0bb-afce-4688-8dbb-425887f68609.png

• GetBuilder没有方便的命令生成模板代码，这个有点遗憾。

参考文章

Flutter Tools