flutter3-os：基于flutter3.x+dart3+getx手机版os管理系统

flutter3-os-admin跨平台手机后台OS系统。

原创Flutter3.22+Dart3.4+Getx+fl_chart等技术开发仿ios手机桌面OA管理系统。自研栅格化布局引擎、自定义桌面壁纸、小部件、底部Dock菜单、可拖拽悬浮球等功能。

在这里插入图片描述

全新自研栅格化OS菜单布局引擎。

在这里插入图片描述

使用技术

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

在这里插入图片描述
之前有分享一款uniapp+vue3跨端仿ios手机桌面系统。
https://blog.csdn.net/yanxinyun1990/article/details/139103578

在这里插入图片描述
编译到windows端效果依然完美显示。

在这里插入图片描述
在这里插入图片描述

项目结构

在这里插入图片描述
采用最新版flutter3.22+dart3.4构建项目，探索全新的手机OA后台管理系统新模式。

在这里插入图片描述
目前该项目已经发布到我的原创作品集，如果有需要，欢迎去下载使用。
https://gf.bilibili.com/item/detail/1106107011

在这里插入图片描述

main.js配置

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'utils/index.dart';

// 栅格模板
import 'layouts/desk.dart';

// 路由管理
import 'router/index.dart';

void main() async {
  // 初始化get_storage存储
  await GetStorage.init();
  initializeDateFormatting();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter WeOS',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
        // 修复windows端字体粗细不一致
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
      ),
      home: const DeskLayout(),
      // 初始化路由
      initialRoute: Utils.isLogin() ? '/' : '/launch',
      // 路由页面
      getPages: routes,
    );
  }
}

flutter3数字解锁

在这里插入图片描述
一改以往输入框验证模式，使用全新自研的数字密码解锁新模式。

在这里插入图片描述
在这里插入图片描述
使用 AnimatedSwitcher 和 FadeTransition 实现动画效果。

@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: [
              ...
            ],
          ),
        ),
      ),
    ),
  );
}

在这里插入图片描述

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),
          ),
        );
      })
    ),
  ],
),

在这里插入图片描述

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']);
            },
          ),
        ),
      );
    })
  ),
),

在这里插入图片描述

flutter3桌面os布局

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

在这里插入图片描述

@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,
          ),
        ],
      ),
    ),
  );
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flutter3桌面os菜单

在这里插入图片描述
在这里插入图片描述

/*
 * ================== 桌面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]  点击图标回调函数
 */

在这里插入图片描述

只需配置children参数，即可生成一个二级弹窗菜单。

在这里插入图片描述
在这里插入图片描述

// 桌面os菜单配置  Q：282310962
List deskMenus = [
  ...
  {
    '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.22+getx实战手机桌面os系统的一些分享，希望对大家有所帮助~

https://blog.csdn.net/yanxinyun1990/article/details/138317354

https://blog.csdn.net/yanxinyun1990/article/details/136996521

https://blog.csdn.net/yanxinyun1990/article/details/136410049

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/685655.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【架构模型】

【架构模型】

一、客户端/服务端模式 二、单击应用模式 单机应用系统是最简单的软件结构&#xff0c;是指运行在一台物理机器上的独立应用程序。
阅读更多...
【大模型】基于Hugging Face调用及微调大模型（1）

【大模型】基于Hugging Face调用及微调大模型（1）

文章目录 一、前言二、Transformer三、Hugging Face3.1 Hugging Face Dataset3. 2 Hugging Face Tokenizer3.3 Hugging Face Transformer3.4 Hugging Face Accelerate 四、基于Hugging Face调用模型4.1 调用示例4.2 调用流程概述4.2.1 Tokenizer4.2.2 模型的加载4.2.3 模型基本…
阅读更多...
spring源码初始学习基础-环境

spring源码初始学习基础-环境

环境&#xff1a;在这里插入代码片 allprojects {repositories {maven { url file:///D:/software/repository} // 本地仓库地址&#xff0c;如果没有依次向下寻找maven { url "https://maven.aliyun.com/repository/public" }mavenLocal()mavenCentral()}buildscri…
阅读更多...
CopilotKit：开源 Copilot 框架，部署应用内 AI 代理，使用 Langchain 自动执行任何任务！

CopilotKit：开源 Copilot 框架，部署应用内 AI 代理，使用 Langchain 自动执行任何任务！

原文链接&#xff1a;&#xff08;更好排版、视频播放、社群交流、最新AI开源项目、AI工具分享都在这个公众号&#xff01;&#xff09; CopilotKit&#xff1a;开源 Copilot 框架&#xff0c;部署应用内 AI 代理&#xff0c;使用 Langchain 自动执行任何任务&#xff01; &am…
阅读更多...
前端工程化工具系列（九）—— mddir(v1.1.1)：自动生成文件目录结构工具

前端工程化工具系列（九）—— mddir(v1.1.1)：自动生成文件目录结构工具

mddir 是一个基于项目目录结构动态生成 Markdown 格式目录结构的工具&#xff0c;方便开发者在文档中展示文件和文件夹的组织结构。 1. 安装 全局安装改工具&#xff0c;方便用于各个项目。 pnpm i -g mddir2. 使用 在想要生成目录接口的项目内打开命令行工具&#xff0c;输…
阅读更多...
RocketMQ教程(一)：RocketMQ的基本概念

RocketMQ教程(一)：RocketMQ的基本概念

RocketMQ是什么？ RocketMQ 是一个分布式消息中间件和流计算平台，由阿里巴巴团队开源并贡献给 Apache 软件基金会，现为 Apache 顶级项目。它主要用于处理大规模数据的传输问题，支持高吞吐量、高可用性和可扩展性的消息发布和订阅服务。RocketMQ 能够确保消息的可靠传输，支持…
阅读更多...
从报名到领证：软考高级【系统分析师】报名考试全攻略

从报名到领证：软考高级【系统分析师】报名考试全攻略

本文共计13156字&#xff0c;预计阅读39分钟。包括七个篇章&#xff1a;报名、准考证打印、备考、考试、成绩查询、证书领取及常见问题。 不想看全文的可以点击目录&#xff0c;找到自己想看的篇章进行阅读。 一、报名篇 报名条件要求&#xff1a; 1.凡遵守中华人民共和国宪…
阅读更多...
R语言探索与分析17-股票题目

R语言探索与分析17-股票题目

Value at Risk&#xff08;VaR&#xff09;是一种统计技术&#xff0c;用于量化投资组合在正常市场条件下可能遭受的最大潜在损失。它是风险管理和金融领域中一个非常重要的概念。VaR通常以货币单位表示&#xff0c;用于估计在给定的置信水平和特定时间范围内&#xff0c;投资组…
阅读更多...
码农危是否到来? AI大模型时代到来程序员能做啥？

码农危是否到来? AI大模型时代到来程序员能做啥？

前言 “马斯克提到人工智能会让工作变得毫无意义&#xff0c;并建议人们可能需要去编写人工智能程序&#xff0c;以避免被AI剥夺就业”&#xff0c;AI大模型的爆发&#xff0c;各种自动化编码应用工具&#xff0c;AI机器人出现&#xff0c;“前有2023年2月份&#xff0c;ChatG…
阅读更多...
基于FPGA的任意点滑动平均（滑动窗长度和数据位宽参数化，例化时参数可设置）

基于FPGA的任意点滑动平均（滑动窗长度和数据位宽参数化，例化时参数可设置）

目录 1.前言2.原理3.举例说明4.Matlab实现5.FPGA实现滑动平均 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 对于一维信号&#xff0c;我们可以使用类似移动平均滤波&#xff08;Moving Average Filtering&#xff09;实现denoising。Moving Average Filtering 是一种…
阅读更多...
算法金 | 再见！！！KNN

算法金 | 再见！！！KNN

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 KNN算法的工作原理简单直观&#xff0c;易于理解和实现&#xff0c;这使得它在各种应用场景中备受青睐。 我们将深入探讨KNN算法&…
阅读更多...
微服务+分库分表的自增主键ID该如何设计？

微服务+分库分表的自增主键ID该如何设计？

一. 前言 分布式ID 是分布式系统里面非常重要的一个组成部分&#xff0c;那么我们在设计分布式ID的时候&#xff0c;需要考虑什么问题呢&#xff1f; ❓简单结构下是怎么实现 ID 的控制的&#xff1f; 单实例系统 &#xff1a;通过时间戳&#xff0c;系统内自增&#xff0c;上…
阅读更多...
【高校科研前沿】新疆生地所陈亚宁研究员团队在GeoSus发文:在1.5°C和2°C全球升温情景下，中亚地区暴露于极端降水的人口增加

【高校科研前沿】新疆生地所陈亚宁研究员团队在GeoSus发文:在1.5°C和2°C全球升温情景下，中亚地区暴露于极端降水的人口增加

目录 文章简介 1.研究内容 2.相关图件 3.文章引用 文章简介 论文名称&#xff1a;Increased population exposures to extreme precipitation in Central Asia under 1.5 ◦C and 2 ◦C global warming scenarios&#xff08;在1.5C和2C全球变暖情景下&#xff0c;中亚地区…
阅读更多...
flutter LINK : ...fatal error LNK1168: �޷���...

flutter LINK : ...fatal error LNK1168: �޷���...

执行 flutter run -d windows 后报错 LINK : fatal error LNK1168: &#xfffd;޷&#xfffd;&#xfffd;&#xfffd; E:\xiaoli\flutter_project\huapu_update_hardware\build\windows\x64\runner\Debug\huapu_update_hardware.exe &#xfffd;&#xfffd;&#xfffd;…
阅读更多...
gstreamer+mpp调用硬解码播放视频

gstreamer+mpp调用硬解码播放视频

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、cpu解码二、gstreamermpp1.默认已安装2.没安装必要软件 总结 前言 以前一直在MPP上开发硬解码推理&#xff0c;最近想弄一个盒子支持调用mpp硬解码播放视频…
阅读更多...
OZON快蜗牛数据工具，OZON数据分析工具

OZON快蜗牛数据工具，OZON数据分析工具

在当今的电商时代&#xff0c;数据已经成为了商家们最宝贵的资产之一。无论是产品选品、市场定位&#xff0c;还是营销策略的制定&#xff0c;都离不开对数据的深入分析和精准把握。而在众多电商平台中&#xff0c;OZON以其独特的商业模式和庞大的用户群体&#xff0c;吸引了众…
阅读更多...
Docker高级篇之Dockerfile解析

Docker高级篇之Dockerfile解析

文章目录 1. DockerFile简介2. DockerFile的构建过程3. DockerFile的常用保留字4. 使用案例5. 虚悬镜像 1. DockerFile简介 DockerFile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像的指令和参数构成的脚本。 2. DockerFile的构建过程 DockerFile内容的基…
阅读更多...
DpEasy社区版1.4.0 | 体验全新的数据库特权账号管理平台！

DpEasy社区版1.4.0 | 体验全新的数据库特权账号管理平台！

上周&#xff0c;我们在社区发布了 DpEasy 调整为数据库特权账号管理平台的说明&#xff08;详见文章《“一键”掌控数据库特权&#xff0c;DpEasy 新版本即将起航》&#xff09;。今天&#xff0c;DpEasy 作为数据库特权账号管理平台正式发布了第一个版本&#xff0c;即 DpEas…
阅读更多...
惠海 H5112C DC-DC降压恒流 PWM调光芯片12V 24V 36V 48V 60V 共阳无频闪 调光细腻顺滑

惠海 H5112C DC-DC降压恒流 PWM调光芯片12V 24V 36V 48V 60V 共阳无频闪 调光细腻顺滑

H5112C多功能平均电流型LED恒流驱动器是一款性能良好的产品&#xff0c;专为大功率恒流LED驱动领域设计。它具备以下显著特点&#xff1a; 宽电压范围&#xff1a;这款驱动器支持5-90V的宽电压输入范围&#xff0c;使其能够适应许多应用环境&#xff0c;有其稳定驱动性能。 准…
阅读更多...
【PL理论】(6) F#：标准库之列表（List）

【PL理论】(6) F#：标准库之列表（List）

​​​​​ &#x1f4ad; 写在前面&#xff1a;本章我们将介绍 F# 标准库的列表&#xff0c;我们将简单的先过一遍列表的一些常用操作&#xff0c;具体的讲解我们将放在后续章节。 目录 0x00 标准库&#xff1a;列表&#xff08;List&#xff09; 0x01 模式匹配与列表 0x…
阅读更多...
最新文章

Copyright @ 2022~2023