317 lines
9.6 KiB
Dart
317 lines
9.6 KiB
Dart
import 'dart:math' as math;
|
|
import 'dart:ui' as ui;
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/physics.dart';
|
|
|
|
class GlassDock extends StatefulWidget {
|
|
const GlassDock({
|
|
super.key,
|
|
required this.selectedIndex,
|
|
required this.onSelected,
|
|
});
|
|
final int selectedIndex;
|
|
final ValueChanged<int> onSelected;
|
|
@override
|
|
State<GlassDock> createState() => _GlassDockState();
|
|
}
|
|
|
|
class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
|
static const _width = 280.0, _travel = 88.0;
|
|
static const _blue = Color(0xFF007AFF);
|
|
late final AnimationController _motion = AnimationController.unbounded(
|
|
vsync: this,
|
|
value: widget.selectedIndex.toDouble(),
|
|
);
|
|
late final AnimationController _press = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(milliseconds: 140),
|
|
);
|
|
double? _drag;
|
|
double _dragSpeed = 0;
|
|
double get _position => _drag ?? _motion.value.clamp(-0.12, 2.12);
|
|
void _spring(int index, [double velocity = 0]) {
|
|
if (MediaQuery.disableAnimationsOf(context)) {
|
|
_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);
|
|
_press.reverse();
|
|
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}) => 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) => AnimatedBuilder(
|
|
animation: Listenable.merge([_motion, _press]),
|
|
builder: (context, _) {
|
|
final press = Curves.easeOut.transform(_press.value);
|
|
final speed = (_drag != null ? _dragSpeed : _motion.velocity).abs();
|
|
final stretch = (speed / 16).clamp(0.0, 0.14) + press * 0.04;
|
|
final lensWidth = 88 * (1 + stretch);
|
|
final lensHeight = 56 + press * 5 - stretch * 9;
|
|
return 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(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Positioned(
|
|
left: 8 + _position * _travel - (lensWidth - 88) / 2,
|
|
top: (70 - lensHeight) / 2,
|
|
width: lensWidth,
|
|
height: lensHeight,
|
|
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.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: (_) => _press.forward(),
|
|
onTapCancel: () {
|
|
if (_drag == null) _press.reverse();
|
|
},
|
|
onTap: () => _select(index),
|
|
onHorizontalDragStart: index == widget.selectedIndex
|
|
? (_) {
|
|
final start = _position.clamp(0.0, 2.0);
|
|
_motion.stop();
|
|
_press.forward();
|
|
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
|
|
? () {
|
|
final position = _position;
|
|
setState(() => _drag = null);
|
|
_motion.value = position;
|
|
_spring(widget.selectedIndex);
|
|
_press.reverse();
|
|
}
|
|
: null,
|
|
child: Center(
|
|
child: AnimatedScale(
|
|
scale: index == _position.round().clamp(0, 2)
|
|
? 1 + _press.value * 0.08
|
|
: 1,
|
|
duration: const Duration(milliseconds: 130),
|
|
child: Icon(
|
|
icon,
|
|
size: 27,
|
|
color: index == _position.round().clamp(0, 2)
|
|
? _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;
|
|
}
|