Dashboard Reborn的SexyTile与SexyBottomSheet组件拆解2个精美Widget直接搬进你的项目【免费下载链接】dashboard_rebornA very sexy Flutter UI template✨项目地址: https://gitcode.com/gh_mirrors/da/dashboard_rebornDashboard Reborn是一款以 UI 设计感和流畅动画为核心卖点的开源 Flutter UI 模板而它最出圈的两个自研组件就是SexyTile圆角阴影卡片和SexyBottomSheet弹性上滑底部面板。这篇拆解文章带你读透这两个 Widget 的实现细节看完就能把它们直接搬进你自己的 Flutter 项目中 ✨两个组件一览先看效果再读代码组件源码位置类型一句话功能SexyTilelib/widgets/sexy_tile.dartStatelessWidget自带圆角、阴影、水波纹的卡片容器SexyBottomSheetlib/widgets/sexy_bottom_sheet.dartStatefulWidget支持拖拽和惯性甩动的上滑面板先看项目里的真实效果Material 页面底部是收起态只显示一行小图标和菜单按钮点击或上滑后面板以弹性动画展开到全屏图标变大并展开成一张张 SexyTile 列表项如何读懂SexyTile30行代码的卡片万能容器打开 sexy_tile.dart整个组件只有 4 个参数参数类型作用childWidget卡片内部放什么内容colorColor卡片背景色splashColorColor按下去时的水波纹颜色onTapFunction()点击回调可不传它的实现就是一个三层嵌套非常值得模仿 外层Container统一margin: 15.0让卡片之间天然留出间距中间层Materialelevation: 10.0borderRadius: 15.0负责圆角和投影并接入全局主题阴影色 shadowColor内层InkWell同样设置 15 圆角保证水波纹不溢出卡片边界onTap为空时自动兜底为空操作杜绝空指针。使用上极其简单比如 About 页面就用它包裹了头像和作者信息见 about_page.dartSexyTile( color: invertInvertColorsMild(context), splashColor: invertColorsMaterial(context), child: Padding( padding: EdgeInsets.all(20.0), child: Column(/* 你的内容 */), ), onTap: () print(卡片被点击了), )首页的网格卡片同样基于它并套上Hero实现页面间的过渡动画见 home_page.dart。如何拆解SexyBottomSheet拖拽 惯性甩动的核心机制这个组件的精华在 sexy_bottom_sheet.dart先看两个全局状态controller一个 500 毫秒的AnimationControllervalue从 0收起到 1展开toggleBottomSheet()用controller.fling(velocity: ±2)切换状态。fling自带弹性缓动甩动感比animateTo自然得多。展开过程是怎么长出来的组件里大量使用lerp(min, max)本质是 lerpDouble 对 controller.value 插值属性收起 (value0)展开 (value1)面板高度80minHeight屏幕全屏高图标尺寸75110图标垂直位置顶部 -15依次排开列表项圆角815图标从一排小方块平滑放大成整行列表全部由一个动画值驱动这就是它丝滑的原因 拖拽手感来自两处手势处理handleDragUpdate手指移动时直接把primaryDelta / maxHeight换算成动画值面板跟手走handleDragEnd松手时读取velocity向上甩就展开、向下甩就收起速度不够 0.5 时才用过半原则补一刀fling完全复刻了手机系统级手势。右下角的按钮则用了AnimatedIconmenu ↔ close进度条直接绑定同一个 controller图标形变和面板展开完全同步见 MenuButton。如何把这两个组件搬进你的项目将项目克隆到本地git clone https://gitcode.com/gh_mirrors/da/dashboard_reborn把 lib/widgets/ 下的sexy_tile.dart和sexy_bottom_sheet.dart复制到你的项目同时带上它们依赖的 lib/utils/ui_helpers.dart提供shadowColor、doNothing等工具与 lib/utils/text_styles.dart文字样式在任意页面的Stack里直接写SexyBottomSheet()即可——参考 material_page.dart 的用法小提醒 ⚠️SexyBottomSheet 的controller目前是文件级全局变量同一 App 里只放一个实例是安全的若要多实例复用建议把它移入State内部并改为实例成员。项目采用 MIT 协议见 LICENSE可自由用于商业项目。总结值得收藏的文件清单卡片组件源码lib/widgets/sexy_tile.dart底部面板源码lib/widgets/sexy_bottom_sheet.dart工具函数lib/utils/ui_helpers.dart使用示例lib/pages/about_page.dart、lib/pages/material_page.dart一句话总结SexyTile 教你用 30 行代码做出高级感卡片SexyBottomSheet 教你用flinglerp做出系统级拖拽手感——这两个模式比组件本身更值钱 【免费下载链接】dashboard_rebornA very sexy Flutter UI template✨项目地址: https://gitcode.com/gh_mirrors/da/dashboard_reborn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考