基于flutter3.22+getx手机端os系统管理FlutterOSX

简介: flutter3-osx原创研发手机桌面式OA管理系统新解决方案模式。

问题背景


在我们的工作生活中,越来越离不开手机,出门也必是标配。我们时常需要在外办公,无奈没有很nice的手机OA办公系统。于是flutter-osx项目就应运而生了。全新原创研发的手机桌面式os系统管理新模式。


经过半个多月爆肝开发,我的又一款原创作品flutter3-osx手机桌面os管理系统正式完结了。

未标题-7.png

全新手机桌面式OA管理系统新解决方案。通过最少的配置,即可像操作手机应用一样操作页面。

未标题-4.png

前段时间有分享一款vue3+uniapp跨端手机os实例项目,如果感兴趣也可以去瞅瞅~

https://developer.aliyun.com/article/1534540

360截图20240604233230126.png

使用技术

  • 编辑器:vscode
  • 技术框架:flutter3.22.1+dart3.4.1
  • 路由/状态管理:get^4.6.6
  • 本地存储:get_storage^2.1.1
  • svg图片插件:flutter_svg^2.0.10+1
  • 图表组件:fl_chart^0.68.0
  • 国际化时间:intl^0.19.0


p2.gif

同样支持编译运行到windows端,效果依然perfect!

pc1.gif

项目结构

采用最新版Flutter3.22开发搭建项目模板。

360截图20240604234716155.png

未标题-1.png 未标题-2.png

采用滑动数字解锁新模式。

001360截图20240604224017952.png   002360截图20240604224117326.png 002360截图20240604224117326.png

image.png

使用 AnimatedSwitcherFadeTransition 小部件来实现切换动画效果。

@override
Widget build(BuildContext context) {
  return Layout(
    extendBodyBehindAppBar: true,
    body: Container(
      padding: const EdgeInsets.all(20.0),
      child: AnimatedSwitcher(
        duration: const Duration(milliseconds: 250),
        // 动画控制
        transitionBuilder: (child, animation) {
          return FadeTransition(
            opacity: animation,
            child: ScaleTransition(
              // scale: animation,
              scale: animation.drive(Tween(begin: 0.9, end: 1.0).chain(CurveTween(curve: Curves.easeOut))),
              child: child,
            ),
          );
        },
        // 当内容有变化的时候就会触发动画
        child: splashScreen ? GestureDetector(
          // 修复Column和Row组件,点击空白处无响应问题
          behavior: HitTestBehavior.translucent,
          child: Column(
            children: [
              ...
            ],
          ),
          onPanStart: (details) {
            setState(() {
              swipeY = details.globalPosition.dy;
            });
          },
          onPanUpdate: (details) {
            double posY = swipeY - details.globalPosition.dy;
            if(posY > 100) {
              setState(() {
                splashScreen = false;
              });
            }
          },
        )
        :
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ...
            ],
          ),
        ),
      ),
    ),
  );
}

5ed3d3fcfb179c8b43021e1f75704120_1289798-20240606075805306-666523875.png

Column(
  children: [
    const Text('数字密码解锁', style: TextStyle(color: Colors.white, fontSize: 14.0),),
    const SizedBox(height: 10.0,),
    Wrap(
      spacing: 15.0,
      children: List.generate(passwordArr.length, (index) {
        return AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          height: 10.0,
          width: 10.0,
          decoration: BoxDecoration(
            color: int.parse(passwordArr[index]) <= pwdValue.length ? Colors.white : Colors.white.withOpacity(0.01),
            border: Border.all(color: Colors.white),
            borderRadius: BorderRadius.circular(50.0),
          ),
        );
      })
    ),
  ],
),

1ad7c8b32450caff35959a2a59639a87_1289798-20240606080044662-455011205.png

Container(
  width: 250.0,
  margin: const EdgeInsets.only(top: 50.0),
  child: Wrap(
    spacing: 15.0,
    runSpacing: 15.0,
    alignment: WrapAlignment.center,
    children: List.generate(keyNumbers.length, (index) {
      return Material(
        type: MaterialType.transparency,
        child: Ink(
          height: 60.0,
          width: 60.0,
          decoration: BoxDecoration(
            color: Colors.white24,
            border: Border.all(color: Colors.white24, width: .5),
            borderRadius: BorderRadius.circular(50.0),
          ),
          child: InkWell(
            borderRadius: BorderRadius.circular(50.0),
            overlayColor: WidgetStateProperty.all(Colors.white38),
            child: DefaultTextStyle(
              style: const TextStyle(color: Colors.white, fontFamily: 'arial'),
              child: Column(
                children: [
                  const SizedBox(height: 10.0,),
                  Text(keyNumbers[index]['num'], style: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
                  Text(keyNumbers[index]['letter'], style: const TextStyle(fontSize: 10.0),),
                ],
              ),
            ),
            onTap: () {
              handleClickNum(keyNumbers[index]['num']);
            },
          ),
        ),
      );
    })
  ),
),

p1-1.gif

运行到桌面端依然保持完美容颜。

023360截图20240605000059085.png 024360截图20240605000124149.png 025360截图20240605000842918.png

flutter-os公共布局

整体桌面分为栅格式菜单+底部Dock菜单+拖拽悬浮球菜单

b8ce5fd3a5cde1ca0c1b342887bbf447_1289798-20240606080827120-1251638686.png

@override
Widget build(BuildContext context) {
  return Scaffold(
    extendBodyBehindAppBar: widget.extendBodyBehindAppBar,
    appBar: widget.appBar ?? AppBar(
      forceMaterialTransparency: true,
      backgroundColor: Colors.transparent,
      foregroundColor: Colors.white,
      toolbarHeight: 0,
    ),
    body: Center(
      child: Stack(
        children: [
          // 壁纸皮肤
          if(widget.showBackground)
            Obx(() => Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('${skinController.skinUrl}'),
                  fit: BoxFit.fill,
                ),
              ),
            ))
          ,
          Flex(
            direction: Axis.vertical,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 顶部插槽
              Container(
                child: widget.header,
              ),

              // 内容区域
              Expanded(
                child: widget.body ?? Container(),
              ),

              // 底部插槽
              Container(
                child: widget.footer,
              ),
            ],
          ),
          // 额外插槽
          Container(
            child: widget.extra,
          ),
        ],
      ),
    ),
  );
}

p3.gif   p4.gif

p5.gif   p5-1.gif

flutter手机桌面栅格布局

2e8cd255047b3b8b68e2956f3415fa7c_1289798-20240606081914932-1676024752.png

d06a2855b7275408a0591fd5a778fbed_1289798-20240606082027855-1104647357.png


/*
 * ================== 手机桌面os配置项 ==================
 * [label]  图标标题
 * [imgico] 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名,当type: 'widget'则为自定义小部件标识名
 * [type]   图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件
 * [path]   跳转路由页面
 * [link]   跳转外部链接
 * [hideLabel]  是否隐藏图标标题
 * [background] 自定义图标背景色
 * [size] 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
 * [onClick]  点击图标回调函数
 */

b737744270095c5242bb94da77224980_1289798-20240606082424160-2048214472.png


93d698cc1cd2da0c406c0478fb1d9a69_1289798-20240606082618748-919425520.png

List flutterDeskMenus = [
  ...
  {
    'uid': '3u85fb90-12c4-11e1-840d-7b25c5ee775a',
    'list': [
      {'label': 'Flutter3.22', 'imgico': 'assets/images/flutter.png', 'link': 'https://flutter.dev/'},
      {'label': 'Dart中文官方文档', 'imgico': 'assets/images/dart.png', 'link': 'https://dart.cn/'},
      ...
      {'label': '日历', 'imgico': const Calendar1x1(), 'type': 'widget', 'path': '/calendar', 'background': const Color(0xffffffff),},
      {'label': '首页', 'imgico': const Icon(Icons.home_outlined), 'type': 'icon', 'path': '/home'},
      {'label': '工作台', 'imgico': const Icon(Icons.poll_outlined), 'type': 'icon', 'path': '/workplace'},
      {
        'label': '组件',
        'children': [
          {'label': '组件', 'imgico': 'assets/images/svg/component.svg', 'path': '/component'},
          ...
        ]
      },
      {
        'label': '管理中心',
        'children': [
          {'label': '个人主页', 'imgico': 'assets/images/svg/my.svg', 'path': '/ucenter'},
          ...
        ]
      },
      {
        'label': '编程开发',
        'children': [
          {'label': 'Github', 'imgico': 'assets/images/svg/github.svg', 'background': const Color(0xff607d8b),},
          {'label': 'Flutter', 'imgico': 'assets/images/flutter.png', 'background': const Color(0xFFDAF2FA),},
          {'label': 'ChatGPT', 'imgico': 'assets/images/svg/chatgpt.svg', 'background': const Color(0xFF15A17F),},
          ...
        ]
      },
      {
        'label': '关于', 'imgico': const Icon(Icons.info), 'type': 'icon',
        'onClick': () => {
          ...
        }
      },
      {
        'label': '公众号', 'imgico': const Icon(Icons.qr_code), 'type': 'icon',
        'onClick': () => {
          ...
        }
      },
    ]
  }
  ...
];

通过实战开发flutter3-osx项目,探索了一种全新的手机桌面os管理系统解决方案。

当然小伙伴们也可以在此框架上做一些有创意的项目,帮助到更多需要帮助的人。一起为flutter生态添砖加瓦,fighting~~


目录
相关文章
|
5月前
|
存储 设计模式 Dart
Flutter笔记:getX库中的GetView中间件
Flutter笔记:getX库中的GetView中间件
223 0
|
5月前
|
存储 Dart 数据库
Flutter笔记:状态提升、控制器模式、GetX控制器和服务
Flutter笔记:状态提升、控制器模式、GetX控制器和服务
292 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1490 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
存储 数据库 索引
Flutter笔记:滚动之-无限滚动与动态加载的实现(GetX简单状态管理版)
本文介绍Flutter中如何实无线滚动(基于GetX简单状态管理而非有状态组件)
120 0
|
4月前
|
缓存 视频直播
flutter3-dylive 基于flutter3.19+getx短视频/直播应用
基于跨端技术flutter3.19+dart3+getx实战短视频/直播应用项目。
78 4
|
4月前
|
JSON 缓存 移动开发
原创自研uniapp+vue3手机桌面os管理系统
vue3-uniapp-os一款基于uniapp+vue3跨端手机版后台os系统新解决方案。
235 3
|
12月前
|
存储 设计模式 Dart
Flutter笔记:GetX模块中不使用 Get.put 怎么办
依赖注入(Dependency Injection,对于很多真的就是简单的局部共享状态的场景,自己实现单例我个人感觉反而更好。首先,你不需要集中于创建代码初期就从各个模块中导入你的各个控制器,也不需要预先在应用初始化时就创建它们的实例,从而将实例添加到GetX依赖中进行管理。这使得mian文件中的代码更加简洁。如果某个局部状态控制器被移除,你也不需要回到mian文件中来对代码进行改动,只需要删除不用的部分。其次,在Dart语言中,为面向对象的单例实现提供了很方便的支持,仅仅三个小步骤就可以实现严格管理单例。
127 1
|
5月前
|
API
Flutter状态管理终极方案GetX第一篇——路由
Flutter状态管理终极方案GetX第一篇——路由 GetX是Flutter中一个非常流行的状态管理库,它不仅提供了简单易用的状态管理功能,还可以帮助我们方便地管理路由。在这篇文章中,我们将介绍如何使用GetX来实现路由管理。
302 0
|
5月前
|
开发者
Flutter状态管理终极方案GetX第二篇——状态管理
Flutter状态管理终极方案GetX第二篇——状态管理 在Flutter应用程序中,状态管理是必不可少的。GetX提供了简单易用的状态管理方案,使得开发者可以更加轻松地管理应用程序状态。下面介绍GetX中的状态管理方案。
226 0
|
Dart API 容器
Flutter GetX使用详细解读
FlutterGetX 是一个基于 Flutter 框架的状态管理和依赖注入库。它与其他状态管理库相比,具有以下优势。
Flutter GetX使用详细解读