原创自研flutter3.x+getx仿制ios手机桌面UI管理系统模板Flutter3-OS

flutter3-osx基于最新跨平台技术Flutter3.22+Dart3.4+GetX+fl_chart实战仿IOS风格手机os管理系统。全新自研flutter磁贴式栅格布局引擎、分屏式多页管理、自定义主题壁纸、卡片式桌面小部件、可拖拽式悬浮球菜单等功能。

全新原创自研的OS栅格化菜单布局引擎,探索flutter手机端管理系统OA新模式

技术栈

  • 编辑器: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

flutter3-os项目在windows端效果依然nice!其实之前也有专门分享一款flutter3仿macOS桌面框架,感兴趣的可以去看看。

https://www.cnblogs.com/xiaoyan2017/p/18132176

功能特性

经典的栅格化布局+Dock导航模式
桌面菜单JSON配置生成
支持16种栅格布局模式
分屏式多页管理
可拖拽悬浮球菜单
毛玻璃虚化背景操作窗口
丰富的视觉效果,自定义桌面个性壁纸
高定制化自定义桌面小部件

项目结构目录

使用最新版flutter3.22+dart3.4架构开发,颠覆传统后台管理,探索一种全新的手机后台OA管理系统新模式。

目前该项目已经同步到我的原创作品集,有需要的话,欢迎去瞅瞅~

https://gf.bilibili.com/item/detail/1106107011

入口配置

  1. import 'dart:io';
  2. import 'package:flutter/material.dart';
  3. import 'package:get/get.dart';
  4. import 'package:get_storage/get_storage.dart';
  5. import 'package:intl/date_symbol_data_local.dart';
  6.  
  7. import 'utils/index.dart';
  8.  
  9. // 引入桌面栅格模板
  10. import 'layouts/desk.dart';
  11.  
  12. // 引入路由管理
  13. import 'router/index.dart';
  14.  
  15. void main() async {
  16. // 初始化get_storage本地存储
  17. await GetStorage.init();
  18. // 初始化国际化语言
  19. initializeDateFormatting();
  20.  
  21. runApp(const MyApp());
  22. }
  23.  
  24. class MyApp extends StatelessWidget {
  25. const MyApp({super.key});
  26.  
  27. // This widget is the root of your application.
  28. @override
  29. Widget build(BuildContext context) {
  30. return GetMaterialApp(
  31. title: 'Flutter WeOS',
  32. debugShowCheckedModeBanner: false,
  33. theme: ThemeData(
  34. colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  35. useMaterial3: true,
  36. // 修复windows端字体粗细不一致
  37. fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
  38. ),
  39. home: const DeskLayout(),
  40. // 初始化路由
  41. initialRoute: Utils.isLogin() ? '/' : '/launch',
  42. // 路由页面
  43. getPages: routes,
  44. );
  45. }
  46. }

动画式数字密码登录验证解锁新模式。

摒弃传统的输入框式登录方式,为了整体效果一致性采用全新数字解锁验证模式。

使用 AnimatedSwitcher 和 FadeTransition 配合实现切换动画效果。

  1. @override
  2. Widget build(BuildContext context) {
  3. return Layout(
  4. extendBodyBehindAppBar: true,
  5. body: Container(
  6. padding: const EdgeInsets.all(20.0),
  7. child: AnimatedSwitcher(
  8. duration: const Duration(milliseconds: 250),
  9. // 动画控制
  10. transitionBuilder: (child, animation) {
  11. return FadeTransition(
  12. opacity: animation,
  13. child: ScaleTransition(
  14. // scale: animation,
  15. scale: animation.drive(Tween(begin: 0.9, end: 1.0).chain(CurveTween(curve: Curves.easeOut))),
  16. child: child,
  17. ),
  18. );
  19. },
  20. // 当内容有变化的时候就会触发动画
  21. child: splashScreen ? GestureDetector(
  22. // 修复Column和Row组件,点击空白处无响应问题
  23. behavior: HitTestBehavior.translucent,
  24. child: Column(
  25. children: [
  26. ...
  27. ],
  28. ),
  29. onPanStart: (details) {
  30. setState(() {
  31. swipeY = details.globalPosition.dy;
  32. });
  33. },
  34. onPanUpdate: (details) {
  35. double posY = swipeY - details.globalPosition.dy;
  36. if(posY > 100) {
  37. setState(() {
  38. splashScreen = false;
  39. });
  40. }
  41. },
  42. )
  43. :
  44. Center(
  45. child: Column(
  46. mainAxisAlignment: MainAxisAlignment.center,
  47. children: [
  48. ...
  49. ],
  50. ),
  51. ),
  52. ),
  53. ),
  54. );
  55. }

数字密码长度可以自定义配置,没有直接写死6位。

  1. Column(
  2. children: [
  3. const Text('数字密码解锁', style: TextStyle(color: Colors.white, fontSize: 14.0),),
  4. const SizedBox(height: 10.0,),
  5. Wrap(
  6. spacing: 15.0,
  7. children: List.generate(passwordArr.length, (index) {
  8. return AnimatedContainer(
  9. duration: const Duration(milliseconds: 300),
  10. height: 10.0,
  11. width: 10.0,
  12. decoration: BoxDecoration(
  13. color: int.parse(passwordArr[index]) <= pwdValue.length ? Colors.white : Colors.white.withOpacity(0.01),
  14. border: Border.all(color: Colors.white),
  15. borderRadius: BorderRadius.circular(50.0),
  16. ),
  17. );
  18. })
  19. ),
  20. ],
  21. ),

  1. Container(
  2. width: 250.0,
  3. margin: const EdgeInsets.only(top: 50.0),
  4. child: Wrap(
  5. spacing: 15.0,
  6. runSpacing: 15.0,
  7. alignment: WrapAlignment.center,
  8. children: List.generate(keyNumbers.length, (index) {
  9. return Material(
  10. type: MaterialType.transparency,
  11. child: Ink(
  12. height: 60.0,
  13. width: 60.0,
  14. decoration: BoxDecoration(
  15. color: Colors.white24,
  16. border: Border.all(color: Colors.white24, width: .5),
  17. borderRadius: BorderRadius.circular(50.0),
  18. ),
  19. child: InkWell(
  20. borderRadius: BorderRadius.circular(50.0),
  21. overlayColor: WidgetStateProperty.all(Colors.white38),
  22. child: DefaultTextStyle(
  23. style: const TextStyle(color: Colors.white, fontFamily: 'arial'),
  24. child: Column(
  25. children: [
  26. const SizedBox(height: 10.0,),
  27. Text(keyNumbers[index]['num'], style: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
  28. Text(keyNumbers[index]['letter'], style: const TextStyle(fontSize: 10.0),),
  29. ],
  30. ),
  31. ),
  32. onTap: () {
  33. handleClickNum(keyNumbers[index]['num']);
  34. },
  35. ),
  36. ),
  37. );
  38. })
  39. ),
  40. ),

公共布局模板Layout

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

  1. @override
  2. Widget build(BuildContext context) {
  3. return Scaffold(
  4. extendBodyBehindAppBar: widget.extendBodyBehindAppBar,
  5. appBar: widget.appBar ?? AppBar(
  6. forceMaterialTransparency: true,
  7. backgroundColor: Colors.transparent,
  8. foregroundColor: Colors.white,
  9. toolbarHeight: 0,
  10. ),
  11. body: Center(
  12. child: Stack(
  13. children: [
  14. // 壁纸皮肤
  15. if(widget.showBackground)
  16. Obx(() => Container(
  17. decoration: BoxDecoration(
  18. image: DecorationImage(
  19. image: AssetImage('${skinController.skinUrl}'),
  20. fit: BoxFit.fill,
  21. ),
  22. ),
  23. ))
  24. ,
  25. Flex(
  26. direction: Axis.vertical,
  27. crossAxisAlignment: CrossAxisAlignment.start,
  28. children: [
  29. // 顶部插槽
  30. Container(
  31. child: widget.header,
  32. ),
  33.  
  34. // 内容区域
  35. Expanded(
  36. child: widget.body ?? Container(),
  37. ),
  38.  
  39. // 底部插槽
  40. Container(
  41. child: widget.footer,
  42. ),
  43. ],
  44. ),
  45. // 额外插槽
  46. Container(
  47. child: widget.extra,
  48. ),
  49. ],
  50. ),
  51. ),
  52. );
  53. }

flutter栅格式桌面os菜单

桌面os菜单配置项

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

支持配置二级页面。

  1. List deskMenus = [
  2. ...
  3. {
  4. 'uid': '3u85fb90-12c4-11e1-840d-7b25c5ee775a',
  5. 'list': [
  6. {'label': 'Flutter3.22', 'imgico': 'assets/images/flutter.png', 'link': 'https://flutter.dev/'},
  7. {'label': 'Dart中文官方文档', 'imgico': 'assets/images/dart.png', 'link': 'https://dart.cn/'},
  8. ...
  9. {'label': '日历', 'imgico': const Calendar1x1(), 'type': 'widget', 'path': '/calendar', 'background': const Color(0xffffffff),},
  10. {'label': '首页', 'imgico': const Icon(Icons.home_outlined), 'type': 'icon', 'path': '/home'},
  11. {'label': '工作台', 'imgico': const Icon(Icons.poll_outlined), 'type': 'icon', 'path': '/workplace'},
  12. {
  13. 'label': '组件',
  14. 'children': [
  15. {'label': '组件', 'imgico': 'assets/images/svg/component.svg', 'path': '/component'},
  16. ...
  17. ]
  18. },
  19. {
  20. 'label': '管理中心',
  21. 'children': [
  22. {'label': '个人主页', 'imgico': 'assets/images/svg/my.svg', 'path': '/ucenter'},
  23. ...
  24. ]
  25. },
  26. {
  27. 'label': '编程开发',
  28. 'children': [
  29. {'label': 'Github', 'imgico': 'assets/images/svg/github.svg', 'background': const Color(0xff607d8b),},
  30. {'label': 'Flutter', 'imgico': 'assets/images/flutter.png', 'background': const Color(0xFFDAF2FA),},
  31. {'label': 'ChatGPT', 'imgico': 'assets/images/svg/chatgpt.svg', 'background': const Color(0xFF15A17F),},
  32. ...
  33. ]
  34. },
  35. {
  36. 'label': '关于', 'imgico': const Icon(Icons.info), 'type': 'icon',
  37. 'onClick': () => {
  38. ...
  39. }
  40. },
  41. {
  42. 'label': '公众号', 'imgico': const Icon(Icons.qr_code), 'type': 'icon',
  43. 'onClick': () => {
  44. ...
  45. }
  46. },
  47. ]
  48. }
  49. ...
  50. ];

由于该栅格桌面系统涉及到的知识点蛮多的,就不展开详细的一 一介绍了。希望以上分享对大家有所帮助哈~

最后附上两个实例项目

https://www.cnblogs.com/xiaoyan2017/p/18165578

https://www.cnblogs.com/xiaoyan2017/p/18092224

flutter3-weos手机OS系统|Flutter3.22+Getx仿ios桌面管理OA应用的更多相关文章

  1. 高校手机签到系统——第一部分Authority权限系统(下)

    很抱歉,之前寝室光纤断了,所以到现在才更新这个系列的第二篇博客.点击访问高校手机签到系统——第一部分Authority权限系统(上) 这几天我反思了一下上一篇写博上的方式,一味的贴代码式的,是否应该更 ...

  2. 论山寨手机与Android联姻 【2】手机OS成为核心

    手机凭借通话和短信这两项基本功能,积累了用户,开拓了市场.但是用户的需求是永无止境的,对于手机制造商来说,紧跟用户需求,拓展手机功能,是机会也是挑战. 1988年第一款数码相机,在日本上市.数码相机的 ...

  3. android API版本对应的系统版本及Android获取手机和系统版本等信息的代码

    学了这么久的Android,竟然一直对其API对应的名称关系一值搞不清楚,现在网上认真看了下资料,转载一个觉得写得不错的作者的文章,记下来: [背景] 之前折腾android期间,慢慢地知道了,And ...

  4. python常用标准库(os系统模块、shutil文件操作模块)

    常用的标准库 系统模块 import os 系统模块用于对系统进行操作. 常用方法 os模块的常用方法有数十种之多,本文中只选出最常用的几种,其余的还有权限操作.文件的删除创建等详细资料可以参考官方文 ...

  5. OS.js – 开源的 Web OS 系统,赶快来体验

    OS.js 是一个开源的 Web OS 系统,可以在浏览器中运行,提供了窗口管理器,应用程序API,用户界面开发套件和抽象的文件系统等.可以部署在 Node 或者 PHP 环境中运行.OS.js is ...

  6. OS 系统下安装MySql 配置MySql环境变量

    学习Hive需要,闲话不说 本文的内容: 下载Mysql for Mac 下载Mysql Workbench 安装 Mysql 和 Mysql Workbench 配置Mysql在OS 系统上的环境变 ...

  7. 首个攻击该Mac OS系统的恶意软件——KeRanger

    首个攻击该Mac OS系统的恶意软件——KeRanger 曾几何时,苹果操作系统一度被人认为是最安全的操作系统.然而近几年,针对苹果系统的攻击日益增多,影响范围也越来越大.无独有偶,近日,苹果Mac  ...

  8. 高校手机签到系统——Ksoap2的一些使用心得(补充)

    高校手机签到系统系列: 高校手机签到系统——第一部分Authority权限系统(上) 高校手机签到系统——第一部分Authority权限系统(下) 高校手机签到系统——手机客户端 高校手机签到系统—— ...

  9. 高校手机签到系统——zxing.net生成二维码(补充)

    高校手机签到系统——第一部分Authority权限系统(上) 高校手机签到系统——第一部分Authority权限系统(下) 高校手机签到系统——手机客户端 关于zxing.net的使用网上已有很多说明 ...

  10. 在 Linux 的 KVM虚拟机 上安装 Mac OS 系统的研究总结

    在 Linux 的 KVM虚拟机 上安装 Mac OS 系统的研究总结 一.资料来源:    网上一共找到两个方法,一个是视频上的教程,一个是网页资料. 二.视频资料方法内容:1.install qe ...

随机推荐

  1. FPGA技术脚本使用

    做fpga 不会脚本,基本跟残废一个概念.以前我觉得做FPGA应该学习什么人工智能,大数据,机器人.现在想起来真是傻逼,做fpga也好,做ic,做逻辑其实基本能力都是一样的. 一个学习tcl脚本,pe ...

  2. JWT对SpringCloud进行认证和鉴权

    JWT(JSON WEB TOKEN)是基于RFC 7519标准定义的一种可以安全传输的小巧和自包含的JSON对象.由于数据是使用数字签名的,所以是可信任的和安全的.JWT可以使用HMAC算法对sec ...

  3. 解决跨域问题之fetch的使用

    一.介绍 fetch 提供了一个获取资源的接口 (包括跨域). fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 ...

  4. 学Windows批处理第一天:使用批处理命令生成一个文件并写入内容

    脚本功能:1.生成一个文件,文件名格式为:yyyymmddhhmmss 2.文件中写入一段文本 操作步骤:1.新建一个文本文档(txt格式) 2.修改文件名为任意名称(我的叫create_file), ...

  5. springboot获取七牛云空间文件列表及下载功能

    原文摘自:https://www.codernav.com 第一步:新建springboot项目,引入jar包,其中hutool-all是工具类,用来写文件下载,可以随意更换. <!--工具类- ...

  6. 开箱即用!Linux 内核首个原生支持,让你的容器体验飞起来!| 龙蜥技术

    简介: 本文将从 Nydus 架构回顾.RAFS v6 镜像格式和 EROFS over Fscache 按需加载技术三个角度来分别介绍这一技术的演变历程. 文/阿里云内核存储团队,龙蜥社区高性能存储 ...

  7. Nacos2.0的K8s服务发现生态应用及规划

    ​简介:Nacos 是阿里巴巴于 2018 年开源的注册中心及配置中心产品,帮助用户的分布式微服务应用进行服务发现和配置管理功能.随着 Nacos2.0 版本的发布,在性能和扩展性上取得较大突破后,社 ...

  8. [CI/CD] 持续集成 & 持续部署 之 Github Actions

    1. 配置 ssh 免密登录 看这篇简短的就够了 SSH 免密登录主机/服务器 怎么操作 ? 2. 定义 workflow Github Actions 针对项目语言提供了一系列模板,通过稍加修改并组 ...

  9. C# - 能否让 SortedSet.RemoveWhere 内传入的委托异步执行

    TL;DR; 若想充分利用 RemoveWhere 带来的性能优势,建议传入判断是否删除元素的委托内采取同步操作.若一定要在该委托内使用异步操作,可以采用本文中绕行的方法,但摈弃了 RemoveWhe ...

  10. P10118 『STA - R4』And

    P10118 『STA - R4』And 题意:给定 A,B,求 \(\sum y - x\),其中 x,y 满足: x < y x + y = A x & y = B 对于加运算和与运 ...