import 'dart:math' as math; import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:flutter/physics.dart'; import 'glass_refraction.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 with TickerProviderStateMixin { static const _width = 264.0, _height = 68.0, _inset = 3.0, _travel = 86.0; static const _blue = Color(0xFF007AFF); static const _selectedInk = Color(0xFF62666C); late final AnimationController _motion = AnimationController.unbounded( vsync: this, value: widget.selectedIndex.toDouble(), ); late final AnimationController _press = AnimationController.unbounded( vsync: this, value: 0, ); bool _reduceMotion = false; double get _pressure => _press.value.clamp(0.0, 1.18); void _pressTo(double target) { if (_reduceMotion) { _press.value = target; return; } _press.animateWith( SpringSimulation( const SpringDescription(mass: 1, stiffness: 440, damping: 20), _press.value, target, _press.velocity, ), ); } @override void didChangeDependencies() { super.didChangeDependencies(); _reduceMotion = MediaQuery.disableAnimationsOf(context); } double? _drag; double _dragSpeed = 0; double get _position => _drag ?? _motion.value.clamp(-0.12, 2.12); void _spring(int index, [double velocity = 0]) { if (_reduceMotion) { _motion.value = index.toDouble(); return; } _motion.animateWith( SpringSimulation( const SpringDescription(mass: 1, stiffness: 380, damping: 23), _position, index.toDouble(), velocity.clamp(-8, 8), ), ); } void _select(int index, [double velocity = 0]) { final position = _position; setState(() => _drag = null); _motion.value = position; _spring(index, velocity); _pressTo(0); widget.onSelected(index); } @override void didUpdateWidget(GlassDock oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.selectedIndex != widget.selectedIndex && _drag == null) { _spring(widget.selectedIndex); } } @override void dispose() { _motion.dispose(); _press.dispose(); super.dispose(); } Widget _glass({required Widget child, bool lens = false}) { final pressure = _pressure.clamp(0.0, 1.0); final content = CustomPaint( foregroundPainter: _GlassRimPainter(lens: lens), child: DecoratedBox( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: lens ? [ const Color(0xFFD8DBE0) .withValues(alpha: 0.72 * (1 - pressure * 0.91)), const Color(0xFFC3C7CE) .withValues(alpha: 0.60 * (1 - pressure * 0.93)), const Color(0xFFE5E7EB) .withValues(alpha: 0.72 * (1 - pressure * 0.90)), ] : [ Colors.white.withValues(alpha: 0.028), _blue.withValues(alpha: 0.005), Colors.white.withValues(alpha: 0.012), ], ), ), child: child, ), ); return ClipRRect( borderRadius: BorderRadius.circular(40), child: lens ? GlassRefraction(strength: 0.25 + pressure * 0.95, child: content) : BackdropFilter( filter: ui.ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0), child: content, ), ); } @override Widget build(BuildContext context) => AnimatedBuilder( animation: Listenable.merge([_motion, _press]), builder: (context, _) { final press = _pressure; final speed = (_drag != null ? _dragSpeed : _motion.velocity).abs(); final stretch = (speed / 16).clamp(0.0, 0.12) + press * 0.18; final lensWidth = _travel * (1 + stretch); final lensHeight = (_height - _inset * 2) * (1 + press * 0.19 - (speed / 16).clamp(0.0, 0.07)); return SizedBox( width: _width, height: _height, child: DecoratedBox( decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), boxShadow: [ BoxShadow( color: _blue.withValues(alpha: 0.035), blurRadius: 12, offset: const Offset(0, 5), ), ], ), child: Stack( clipBehavior: Clip.none, children: [ Positioned.fill(child: _glass(child: const SizedBox.expand())), Positioned( left: (_inset + _position * _travel - (lensWidth - _travel) / 2) .clamp(1.0, _width - lensWidth - 1), top: (_height - lensHeight) / 2, width: lensWidth, height: lensHeight, child: IgnorePointer( child: _glass(lens: true, child: const SizedBox.expand()), ), ), Positioned( left: _inset, right: _inset, top: _inset, bottom: _inset, child: Row( children: [ _item(0, Icons.calendar_month_rounded, '课表'), _item(1, Icons.assignment_outlined, '考试'), _item(2, 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, onTapDown: (_) => _pressTo(1), onTapCancel: () { if (_drag == null) _pressTo(0); }, onTap: () => _select(index), onHorizontalDragStart: index == widget.selectedIndex ? (_) { final start = _position.clamp(0.0, 2.0); _motion.stop(); _pressTo(1); setState(() { _drag = start; _dragSpeed = 0; }); } : null, onHorizontalDragUpdate: index == widget.selectedIndex ? (details) => setState(() { _dragSpeed = details.delta.dx / _travel * 60; _drag = (_position + details.delta.dx / _travel).clamp( 0.0, 2.0, ); }) : null, onHorizontalDragEnd: index == widget.selectedIndex ? (details) => _select( _position.round().clamp(0, 2), details.velocity.pixelsPerSecond.dx / _travel, ) : null, onHorizontalDragCancel: index == widget.selectedIndex ? () { if (!mounted) return; final position = _position; setState(() => _drag = null); _motion.value = position; _spring(widget.selectedIndex); _pressTo(0); } : null, child: Center( child: AnimatedScale( scale: index == _position.round().clamp(0, 2) ? 1 + _pressure * 0.08 : 1, duration: const Duration(milliseconds: 130), child: Icon( icon, size: 27, color: index == _position.round().clamp(0, 2) ? _selectedInk : _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 edge = lens ? const Color(0xFF7B838F) : _blue; 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), edge.withValues(alpha: lens ? 0.30 : 0.15), Colors.white.withValues(alpha: 0.10), Colors.white.withValues(alpha: 0.86), edge.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), edge.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; }