feat(juice): button press feedback + fade screen transitions
Adds PressableScale (0.94 squish on tap-down) around the Adventure FilledButton, Classic OutlinedButton, and each season-map stage node. Replaces all in-app MaterialPageRoute pushes with a gentle fade+scale PageRouteBuilder (320ms in, 240ms out) via a new fadeRoute helper.
This commit is contained in:
@@ -6,6 +6,8 @@ import '../../game/models/stage.dart';
|
||||
import '../../l10n/gen/app_localizations.dart';
|
||||
import '../../state/providers.dart';
|
||||
import '../widgets/banner_ad_slot.dart';
|
||||
import '../widgets/fade_route.dart';
|
||||
import '../widgets/pressable_scale.dart';
|
||||
import '../widgets/season_background.dart';
|
||||
import 'game_screen.dart';
|
||||
import 'season_map_screen.dart';
|
||||
@@ -67,7 +69,8 @@ class HomeScreen extends ConsumerWidget {
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 44),
|
||||
FilledButton(
|
||||
PressableScale(
|
||||
child: FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 56, vertical: 18),
|
||||
@@ -76,14 +79,15 @@ class HomeScreen extends ConsumerWidget {
|
||||
onPressed: () {
|
||||
if (!(ModalRoute.of(context)?.isCurrent ?? true)) return;
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (_) => const SeasonMapScreen()),
|
||||
fadeRoute(const SeasonMapScreen()),
|
||||
);
|
||||
},
|
||||
child: Text(l10n.adventure),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
OutlinedButton(
|
||||
PressableScale(
|
||||
child: OutlinedButton(
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 40, vertical: 14),
|
||||
@@ -99,12 +103,12 @@ class HomeScreen extends ConsumerWidget {
|
||||
),
|
||||
);
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (_) => const GameScreen()),
|
||||
fadeRoute(const GameScreen()),
|
||||
);
|
||||
},
|
||||
child: Text(l10n.classic),
|
||||
),
|
||||
),
|
||||
if (best > 0) ...[
|
||||
const SizedBox(height: 10),
|
||||
Text(
|
||||
@@ -127,7 +131,7 @@ class HomeScreen extends ConsumerWidget {
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.settings, color: Colors.white70),
|
||||
onPressed: () => Navigator.of(context).push(
|
||||
MaterialPageRoute(builder: (_) => const SettingsScreen()),
|
||||
fadeRoute(const SettingsScreen()),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -5,7 +5,9 @@ import '../../game/models/season.dart';
|
||||
import '../../state/providers.dart';
|
||||
import '../theme/palette.dart';
|
||||
import '../widgets/banner_ad_slot.dart';
|
||||
import '../widgets/fade_route.dart';
|
||||
import '../widgets/map_layout.dart';
|
||||
import '../widgets/pressable_scale.dart';
|
||||
import '../widgets/season_background.dart';
|
||||
import '../widgets/tile_painter.dart';
|
||||
import 'game_screen.dart';
|
||||
@@ -193,6 +195,7 @@ class _JourneyMapState extends ConsumerState<_JourneyMap> {
|
||||
key: Key('stage_node_$i'),
|
||||
left: center.dx - size / 2,
|
||||
top: center.dy - size / 2,
|
||||
child: PressableScale(
|
||||
child: GestureDetector(
|
||||
onTap: !isUnlocked
|
||||
? null
|
||||
@@ -201,7 +204,7 @@ class _JourneyMapState extends ConsumerState<_JourneyMap> {
|
||||
.read(seasonFlowProvider.notifier)
|
||||
.startSeasonStage(widget.pack, i);
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(builder: (_) => const GameScreen()),
|
||||
fadeRoute(const GameScreen()),
|
||||
);
|
||||
},
|
||||
child: Column(
|
||||
@@ -268,6 +271,7 @@ class _JourneyMapState extends ConsumerState<_JourneyMap> {
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
// lib/ui/widgets/fade_route.dart
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// A gentle fade(+slight scale) page transition for in-app navigation.
|
||||
Route<T> fadeRoute<T>(Widget page) {
|
||||
return PageRouteBuilder<T>(
|
||||
transitionDuration: const Duration(milliseconds: 320),
|
||||
reverseTransitionDuration: const Duration(milliseconds: 240),
|
||||
pageBuilder: (_, _, _) => page,
|
||||
transitionsBuilder: (_, animation, _, child) {
|
||||
final curved =
|
||||
CurvedAnimation(parent: animation, curve: Curves.easeOutCubic);
|
||||
return FadeTransition(
|
||||
opacity: curved,
|
||||
child: ScaleTransition(
|
||||
scale: Tween(begin: 0.98, end: 1.0).animate(curved),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// lib/ui/widgets/pressable_scale.dart
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Wraps a tappable child with a quick scale-down on press for tactile feel.
|
||||
/// If [onTap] is provided it handles the tap; otherwise the child's own
|
||||
/// gesture/button handles it and this only adds the visual squish.
|
||||
class PressableScale extends StatefulWidget {
|
||||
const PressableScale({super.key, required this.child, this.onTap});
|
||||
|
||||
final Widget child;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
@override
|
||||
State<PressableScale> createState() => _PressableScaleState();
|
||||
}
|
||||
|
||||
class _PressableScaleState extends State<PressableScale> {
|
||||
bool _down = false;
|
||||
void _set(bool v) => setState(() => _down = v);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTapDown: (_) => _set(true),
|
||||
onTapUp: (_) => _set(false),
|
||||
onTapCancel: () => _set(false),
|
||||
onTap: widget.onTap,
|
||||
child: AnimatedScale(
|
||||
scale: _down ? 0.94 : 1.0,
|
||||
duration: const Duration(milliseconds: 90),
|
||||
curve: Curves.easeOut,
|
||||
child: widget.child,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user