首次远程推送
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../app/app_theme.dart';
|
||||
import '../../../l10n/l10n.dart';
|
||||
import '../../../models/today_progress.dart';
|
||||
import '../../../widgets/app_motion.dart';
|
||||
|
||||
class DailyProgressRail extends StatelessWidget {
|
||||
const DailyProgressRail({required this.progress, super.key});
|
||||
@@ -27,16 +29,10 @@ class DailyProgressRail extends StatelessWidget {
|
||||
icon: Icons.timer_outlined,
|
||||
complete: progress.hasFocus,
|
||||
),
|
||||
_ProgressItem(
|
||||
label: l10n.progressHabits,
|
||||
detail: '${progress.completedHabits}/${progress.totalHabits}',
|
||||
icon: Icons.eco_outlined,
|
||||
complete: progress.hasHabits,
|
||||
),
|
||||
_ProgressItem(
|
||||
label: l10n.progressReflect,
|
||||
detail: progress.hasReflection ? l10n.done : l10n.later,
|
||||
icon: Icons.auto_awesome_outlined,
|
||||
icon: Icons.edit_note_rounded,
|
||||
complete: progress.hasReflection,
|
||||
),
|
||||
];
|
||||
@@ -60,71 +56,94 @@ class _HorizontalProgress extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final scheme = theme.colorScheme;
|
||||
final visuals = FocusSeedVisuals.of(context);
|
||||
final lastCompleteIndex = items.lastIndexWhere((item) => item.complete);
|
||||
final progress =
|
||||
lastCompleteIndex <= 0 ? 0.0 : lastCompleteIndex / (items.length - 1);
|
||||
return Semantics(
|
||||
label: context.l10n.dailyStepsComplete(
|
||||
items.where((item) => item.complete).length,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
child: Column(
|
||||
children: [
|
||||
for (var index = 0; index < items.length; index++)
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 34,
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
if (index > 0)
|
||||
Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: 2,
|
||||
color:
|
||||
items[index - 1].complete
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.outlineVariant,
|
||||
),
|
||||
SizedBox(
|
||||
height: 32,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final inset = constraints.maxWidth / (items.length * 2);
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Positioned(
|
||||
left: inset,
|
||||
right: inset,
|
||||
top: 15,
|
||||
child: _ProgressTrack(
|
||||
color: scheme.outlineVariant.withValues(alpha: 0.72),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: inset,
|
||||
right: inset,
|
||||
top: 15,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: FractionallySizedBox(
|
||||
widthFactor: progress.clamp(0.0, 1.0),
|
||||
child: _ProgressTrack(
|
||||
color: visuals.success,
|
||||
glow: visuals.success.withValues(alpha: 0.20),
|
||||
),
|
||||
if (index < items.length - 1)
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: 2,
|
||||
color:
|
||||
items[index].complete
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.outlineVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: Row(
|
||||
children: [
|
||||
for (final item in items)
|
||||
Expanded(
|
||||
child: Center(child: _ProgressDot(item: item)),
|
||||
),
|
||||
),
|
||||
_ProgressDot(item: items[index]),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
Text(
|
||||
items[index].label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
items[index].detail,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
for (final item in items)
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
item.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 1),
|
||||
Text(
|
||||
item.detail,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
color: scheme.onSurfaceVariant,
|
||||
fontSize: 10.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -161,6 +180,28 @@ class _VerticalProgress extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class _ProgressTrack extends StatelessWidget {
|
||||
const _ProgressTrack({required this.color, this.glow});
|
||||
|
||||
final Color color;
|
||||
final Color? glow;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedContainer(
|
||||
duration: AppMotion.duration(context, AppMotion.medium),
|
||||
curve: AppMotion.emphasized,
|
||||
height: 2,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.circular(99),
|
||||
boxShadow:
|
||||
glow == null ? null : [BoxShadow(color: glow!, blurRadius: 10)],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ProgressDot extends StatelessWidget {
|
||||
const _ProgressDot({required this.item});
|
||||
|
||||
@@ -169,29 +210,51 @@ class _ProgressDot extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color:
|
||||
item.complete
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.surfaceContainerLowest,
|
||||
border: Border.all(
|
||||
color:
|
||||
final scheme = theme.colorScheme;
|
||||
final visuals = FocusSeedVisuals.of(context);
|
||||
return AnimatedScale(
|
||||
scale: item.complete ? 1.08 : 1,
|
||||
duration: AppMotion.duration(context, AppMotion.fast),
|
||||
curve: AppMotion.settle,
|
||||
child: AnimatedContainer(
|
||||
duration: AppMotion.duration(context, AppMotion.medium),
|
||||
curve: AppMotion.emphasized,
|
||||
width: 28,
|
||||
height: 28,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: item.complete ? visuals.success : scheme.surfaceContainerLow,
|
||||
border: Border.all(
|
||||
color: item.complete ? visuals.success : scheme.outlineVariant,
|
||||
),
|
||||
boxShadow:
|
||||
item.complete
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.outline,
|
||||
? [
|
||||
BoxShadow(
|
||||
color: visuals.success.withValues(alpha: 0.20),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 3),
|
||||
),
|
||||
]
|
||||
: null,
|
||||
),
|
||||
child: AnimatedSwitcher(
|
||||
duration: AppMotion.duration(context, AppMotion.fast),
|
||||
switchInCurve: AppMotion.settle,
|
||||
switchOutCurve: Curves.easeInCubic,
|
||||
transitionBuilder: (child, animation) {
|
||||
return FadeTransition(
|
||||
opacity: animation,
|
||||
child: ScaleTransition(scale: animation, child: child),
|
||||
);
|
||||
},
|
||||
child: Icon(
|
||||
item.complete ? Icons.check_rounded : item.icon,
|
||||
key: ValueKey('${item.label}-${item.complete}'),
|
||||
size: 15,
|
||||
color: item.complete ? scheme.onPrimary : scheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
item.complete ? Icons.check_rounded : item.icon,
|
||||
size: 17,
|
||||
color:
|
||||
item.complete
|
||||
? theme.colorScheme.onPrimary
|
||||
: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user