技术经验谈 技术经验谈
首页
  • 最佳实践

    • 抓包
    • 数据库操作
  • ui

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • 总纲
  • 整体开发框架
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

hss01248

一号线程序员
首页
  • 最佳实践

    • 抓包
    • 数据库操作
  • ui

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • 总纲
  • 整体开发框架
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 学习资料

  • 技术选型

    • flutter总纲
    • 整体开发框架选型
      • 路由模块化:
      • 单工程 多module
      • 多工程
    • ui组件框架选型
    • flutter数据库选型
  • 要点

  • 经验

  • flutter
  • 技术选型
hss01248
2022-08-21
目录

整体开发框架选型

# 整体开发框架选型

# flutter boost+GetX

flutter boost用来包装和原生对接的部分

getx提供flutter部分的通用能力:

  • 路由
  • 状态管理
  • 国际化管理,主题管理
  • 依赖注入/查找
  • 工具类

两者混用会有问题:

https://github.com/alibaba/flutter_boost/issues?q=getx

初始化

void main() {
  PageVisibilityBinding.instance
      .addGlobalObserver(AppGlobalPageVisibilityObserver());
  CustomFlutterBinding();
  runApp(MyBoostApp());//最外层用boost,boost内通过appBuilder再嫁接到GetX
}

class CustomFlutterBinding extends WidgetsFlutterBinding
    with BoostFlutterBinding {}


class MyBoostApp extends StatefulWidget {
  @override
  State<MyBoostApp> createState() => _MyBoostAppState();
}
//Flutter内部使用get路由,原生和flutter路由用boost
class _MyBoostAppState extends State<MyBoostApp> {

  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return FlutterBoostApp(BoostRouterConfig.routeFactory,
        interceptors: [
      CustomInterceptor1(),
      CustomInterceptor2(),
      CustomInterceptor3()
    ],
      appBuilder: appBuilder,
     // initialRoute: "splash",
    );
  }

  Widget appBuilder(Widget home2){
    return GetMaterialApp(home: Home(),
      unknownRoute: RouterConfig.unknownPage(),
      initialRoute: '/',
      getPages: RouterConfig.routers(),
      navigatorObservers: [
        GetObserver(RouterMiddleWare.observer), // HERE !!!
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

对应的widget层次:

image-20220831150222493

# 路由

Flutter内部使用get路由,

原生和flutter路由用boost,

原生内部用Arouter.

整体的跳转按web url的格式来处理

以参数内"isNativeRouter=1"或isFlutterRouter=1来标识是原生还是flutter.

原生和flutter路由层拦截器处理此参数.

# 路由模块化:

参考 Flutter 路由模块化 - flutter_mixin_router (opens new window)的做法.

# 工程模块化

# 单工程 多module

有java/Android那种同一个工程内分多个module的功能,但入口比较隐蔽:

根目录下点击右键:

image-20220831153304602

image-20220831153343294

image-20220831153414565

选择package类型或者module类型

两者区别:

module带Android/ios文件夹,可独立运行- 可用于建立组件demo

package则是单纯的库

image-20220831153811397

然后手动添加flutter sdk依赖

image-20220831153905571

最后,将模块添加到yaml里:

dependencies:
   xxx_base:
      path: xxx_base
1
2
3

# 多工程

# 参考

https://www.jianshu.com/p/717661cbb708

编辑 (opens new window)
上次更新: 2022/09/01, 17:18:38
flutter总纲
ui组件框架选型

← flutter总纲 ui组件框架选型→

最近更新
01
截图后的自动压缩工具
12-27
02
图片视频文件根据exif批量重命名
12-27
03
chatgpt图片识别描述功能
02-20
更多文章>
Theme by Vdoing | Copyright © 2020-2025 | 粤ICP备20041795号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式