今天分享一款潜心研发的flutter3+dart3+getx+flchart
手机桌面os管理系统模板FlutterOS。
全新自研flutter栅格布局引擎、分屏式多页管理、自定义主题壁纸、桌面小部件、可拖拽式悬浮球菜单等功能。
使用最新版flutter3.22.1开发构建项目。
一改之前输入框式登录方式,采用全新自研数字密码解锁模式。
使用 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: [ ... ], ), ), ), ), ); }
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']); }, ), ), ); }) ), ),
通过实战开发这个flutter项目,探索一种全新os式后台管理系统。
当然,如果小伙伴们有其它更有创意的功能,欢迎一起交流讨论。