david1465833828/TPSchedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add course bar length setting and clear blue glass Dock

Browse Source
This commit is contained in:
Codex
2026-10-13 12:51:27 +08:00
parent 8403be05da
commit 9193fd8e43
11 changed files with 444 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/lib/widgets/glass_dock.dart
+159 -127
View File
@@ -1,4 +1,5 @@
import 'dart:ui';
import 'dart:math' as math;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
@@ -16,6 +17,7 @@ class GlassDock extends StatefulWidget {
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) {
@@ -23,137 +25,83 @@ class _GlassDockState extends State<GlassDock> {
widget.onSelected(index);
}
@override
Widget build(BuildContext context) => Container(
width: _width,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: const Color(0xFF10212E).withValues(alpha: 0.22),
blurRadius: 28,
offset: const Offset(0, 10),
),
BoxShadow(
color: Colors.white.withValues(alpha: 0.35),
blurRadius: 1,
spreadRadius: 1,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(40),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 24, sigmaY: 24),
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(
borderRadius: BorderRadius.circular(40),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFFB9C0CA).withValues(alpha: 0.58),
const Color(0xFF56616D).withValues(alpha: 0.34),
const Color(0xFFA1ADB8).withValues(alpha: 0.42),
],
),
border: Border.all(
color: Colors.white.withValues(alpha: 0.55),
width: 1.2,
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: Stack(
children: [
Positioned(
left: 18,
right: 18,
top: 1,
child: Container(
height: 1.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(
colors: [
Colors.white.withValues(alpha: 0),
Colors.white.withValues(alpha: 0.8),
Colors.white.withValues(alpha: 0.08),
],
),
),
),
),
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: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(36),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF24323F).withValues(alpha: 0.64),
const Color(0xFF101E2B).withValues(alpha: 0.8),
const Color(0xFF475866).withValues(alpha: 0.5),
],
),
border: Border.all(
color: Colors.white.withValues(alpha: 0.3),
width: 0.9,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.18),
blurRadius: 7,
offset: const Offset(0, 3),
),
BoxShadow(
color: Colors.white.withValues(alpha: 0.12),
blurRadius: 3,
spreadRadius: 0.5,
),
],
),
),
),
),
Positioned(
left: 8,
right: 8,
top: 7,
bottom: 7,
child: Row(
children: [
_item(0, Icons.calendar_month_rounded, '课表'),
_item(1, Icons.person_rounded, '我的'),
],
),
),
Positioned(
left: 16,
right: 16,
bottom: 1,
child: Container(
height: 1.3,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.white.withValues(alpha: 0.05),
Colors.white.withValues(alpha: 0.5),
Colors.white.withValues(alpha: 0.05),
],
),
),
),
),
],
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, '我的'),
],
),
),
],
),
),
),
@@ -169,7 +117,6 @@ class _GlassDockState extends State<GlassDock> {
key: index == widget.selectedIndex ? const Key('dock-cursor') : null,
behavior: HitTestBehavior.opaque,
onTap: () => _select(index),
// Only the selected lens can start a drag. The pages have no swipe handlers.
onHorizontalDragStart: index == widget.selectedIndex
? (_) => setState(() => _drag = widget.selectedIndex.toDouble())
: null,
@@ -192,11 +139,96 @@ class _GlassDockState extends State<GlassDock> {
icon,
size: 27,
color: index == (_position >= 0.5 ? 1 : 0)
? const Color(0xFF458BFF)
: Colors.white.withValues(alpha: 0.85),
? _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;
}