import 'dart:math' as math; import 'dart:ui' as ui; import 'package:flutter/material.dart'; class GlassDock extends StatefulWidget { const GlassDock({ super.key, required this.selectedIndex, required this.onSelected, }); final int selectedIndex; final ValueChanged onSelected; @override State createState() => _GlassDockState(); } class _GlassDockState extends State { static const _width = 192.0, _travel = 88.0; static const _blue = Color(0xFF007AFF); double? _drag; double get _position => _drag ?? widget.selectedIndex.toDouble(); void _select(int index) { setState(() => _drag = null); widget.onSelected(index); } Widget _glass({required Widget child, bool lens = false}) => ClipRRect( borderRadius: BorderRadius.circular(lens ? 36 : 40), child: BackdropFilter( // Keep the underlying timetable visible. Optical rims provide the glass // thickness instead of a frosted, heavily tinted fill. filter: ui.ImageFilter.blur( sigmaX: lens ? 0.6 : 1.5, sigmaY: lens ? 0.6 : 1.5, ), child: CustomPaint( foregroundPainter: _GlassRimPainter(lens: lens), child: DecoratedBox( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: lens ? [ Colors.white.withValues(alpha: 0.045), _blue.withValues(alpha: 0.018), Colors.white.withValues(alpha: 0.012), ] : [ Colors.white.withValues(alpha: 0.028), _blue.withValues(alpha: 0.005), Colors.white.withValues(alpha: 0.012), ], ), ), child: child, ), ), ), ); @override Widget build(BuildContext context) => SizedBox( width: _width, height: 70, child: DecoratedBox( decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), boxShadow: [ BoxShadow( color: _blue.withValues(alpha: 0.035), blurRadius: 12, offset: const Offset(0, 5), ), ], ), child: _glass( child: Stack( children: [ AnimatedPositioned( duration: Duration(milliseconds: _drag == null ? 260 : 0), curve: Curves.easeOutCubic, left: 7 + _position * _travel, top: _drag == null ? 7 : 5, width: _drag == null ? 90 : 94, height: _drag == null ? 56 : 60, child: IgnorePointer( child: _glass(lens: true, child: const SizedBox.expand()), ), ), Positioned( left: 8, right: 8, top: 7, bottom: 7, child: Row( children: [ _item(0, Icons.calendar_month_rounded, '课表'), _item(1, Icons.person_rounded, '我的'), ], ), ), ], ), ), ), ); Widget _item(int index, IconData icon, String label) => Expanded( child: Semantics( label: label, button: true, selected: index == widget.selectedIndex, excludeSemantics: true, onTap: () => _select(index), child: GestureDetector( key: index == widget.selectedIndex ? const Key('dock-cursor') : null, behavior: HitTestBehavior.opaque, onTap: () => _select(index), onHorizontalDragStart: index == widget.selectedIndex ? (_) => setState(() => _drag = widget.selectedIndex.toDouble()) : null, onHorizontalDragUpdate: index == widget.selectedIndex ? (details) => setState( () => _drag = (_position + details.delta.dx / _travel).clamp( 0, 1, ), ) : null, onHorizontalDragEnd: index == widget.selectedIndex ? (_) => _select(_position >= 0.5 ? 1 : 0) : null, onHorizontalDragCancel: index == widget.selectedIndex ? () => setState(() => _drag = null) : null, child: Center( child: Icon( icon, size: 27, color: index == (_position >= 0.5 ? 1 : 0) ? _blue : _blue.withValues(alpha: 0.48), ), ), ), ), ); } /// Thin paired rims and directional glints suggest rounded optical thickness. /// All strong highlights stay on the edge; the centre remains clear. class _GlassRimPainter extends CustomPainter { const _GlassRimPainter({required this.lens}); final bool lens; static const _blue = Color(0xFF007AFF); @override void paint(Canvas canvas, Size size) { final bounds = Offset.zero & size; final outer = RRect.fromRectAndRadius( bounds.deflate(0.7), Radius.circular(size.height / 2), ); final inner = RRect.fromRectAndRadius( bounds.deflate(2.2), Radius.circular(size.height / 2 - 1.5), ); canvas.drawRRect( outer, Paint() ..style = PaintingStyle.stroke ..strokeWidth = lens ? 1.25 : 1.1 ..shader = ui.Gradient.sweep( bounds.center, [ Colors.white.withValues(alpha: 0.90), _blue.withValues(alpha: lens ? 0.30 : 0.15), Colors.white.withValues(alpha: 0.10), Colors.white.withValues(alpha: 0.86), _blue.withValues(alpha: 0.12), Colors.white.withValues(alpha: 0.90), ], [0.0, 0.18, 0.38, 0.60, 0.80, 1.0], TileMode.clamp, -math.pi / 2, math.pi * 1.5, ), ); canvas.drawRRect( inner, Paint() ..style = PaintingStyle.stroke ..strokeWidth = 0.7 ..shader = ui.Gradient.linear( bounds.topLeft, bounds.bottomRight, [ Colors.white.withValues(alpha: 0.30), _blue.withValues(alpha: lens ? 0.13 : 0.07), Colors.white.withValues(alpha: 0.40), ], [0.0, 0.5, 1.0], ), ); final shine = Path() ..moveTo(size.height * 0.32, 4) ..quadraticBezierTo( size.width * 0.5, 1.8, size.width - size.height * 0.35, 4, ); canvas.drawPath( shine, Paint() ..style = PaintingStyle.stroke ..strokeCap = StrokeCap.round ..strokeWidth = 0.8 ..shader = ui.Gradient.linear( Offset.zero, Offset(size.width, 0), [ Colors.white.withValues(alpha: 0), Colors.white.withValues(alpha: 0.65), Colors.white.withValues(alpha: 0), ], [0.0, 0.5, 1.0], ), ); } @override bool shouldRepaint(_GlassRimPainter oldDelegate) => oldDelegate.lens != lens; }