TPSchedule/mobile/lib/widgets/glass_dock.dart

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<int> onSelected;
  @override
  State<GlassDock> createState() => _GlassDockState();
}

class _GlassDockState extends State<GlassDock> {
  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;
}