feat: UI modernization Phase 2 — micro-animation, typography, ambient glow
A-1 Micro-animation: Pressable wrapper widget (AnimatedScale 0.97 on tap)
applied to LevelTitleCard
A-2 Bold Typography: LevelTitleCard title font 28→36px, 現在の称号 label
demoted to bodySmall for stronger visual contrast
A-3 Ambient Glow: RadialGradient circle behind My Page (top-left, brandPrimary)
and Sommelier screen (top-right, brandAccent) via Stack + IgnorePointer
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ponshu Developer
parent
1741e74639
commit
a14dae1afb
|
|
@ -91,7 +91,29 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
|||
userProfile.gender
|
||||
);
|
||||
|
||||
return SingleChildScrollView(
|
||||
return Stack(
|
||||
children: [
|
||||
// Ambient Glow — 右上の薄い光
|
||||
Positioned(
|
||||
top: -60,
|
||||
right: -60,
|
||||
child: IgnorePointer(
|
||||
child: Container(
|
||||
width: 280,
|
||||
height: 280,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
Theme.of(context).extension<AppColors>()!.brandAccent.withValues(alpha: 0.07),
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
|
|
@ -122,7 +144,9 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
|||
const SizedBox(height: 32),
|
||||
],
|
||||
),
|
||||
);
|
||||
), // SingleChildScrollView
|
||||
], // Stack children
|
||||
); // Stack
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (err, stack) => ErrorRetryWidget(
|
||||
|
|
|
|||
|
|
@ -34,7 +34,29 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
|||
title: Text(t['myPage']),
|
||||
centerTitle: true,
|
||||
),
|
||||
body: ListView(
|
||||
body: Stack(
|
||||
children: [
|
||||
// Ambient Glow — 左上の薄い光
|
||||
Positioned(
|
||||
top: -80,
|
||||
left: -60,
|
||||
child: IgnorePointer(
|
||||
child: Container(
|
||||
width: 320,
|
||||
height: 320,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
appColors.brandPrimary.withValues(alpha: 0.07),
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
|
||||
|
|
@ -126,7 +148,9 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
|||
const SizedBox(height: 24),
|
||||
BackupSettingsSection(),
|
||||
],
|
||||
),
|
||||
), // ListView
|
||||
], // Stack children
|
||||
), // Stack
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
/// タップ時に軽く沈み込むスケールアニメーションを付与するラッパー。
|
||||
/// 既存の GestureDetector / InkWell の代わりに使用する。
|
||||
class Pressable extends StatefulWidget {
|
||||
const Pressable({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.onTap,
|
||||
this.scale = 0.97,
|
||||
this.duration = const Duration(milliseconds: 100),
|
||||
});
|
||||
|
||||
final Widget child;
|
||||
final VoidCallback? onTap;
|
||||
final double scale;
|
||||
final Duration duration;
|
||||
|
||||
@override
|
||||
State<Pressable> createState() => _PressableState();
|
||||
}
|
||||
|
||||
class _PressableState extends State<Pressable> {
|
||||
bool _pressed = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTapDown: (_) => setState(() => _pressed = true),
|
||||
onTapUp: (_) {
|
||||
setState(() => _pressed = false);
|
||||
widget.onTap?.call();
|
||||
},
|
||||
onTapCancel: () => setState(() => _pressed = false),
|
||||
child: AnimatedScale(
|
||||
scale: _pressed ? widget.scale : 1.0,
|
||||
duration: widget.duration,
|
||||
curve: Curves.easeOut,
|
||||
child: widget.child,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
import '../../providers/theme_provider.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../contextual_help_icon.dart';
|
||||
import '../common/pressable.dart';
|
||||
import '../../theme/app_colors.dart';
|
||||
|
||||
class LevelTitleCard extends ConsumerWidget {
|
||||
|
|
@ -20,7 +21,8 @@ class LevelTitleCard extends ConsumerWidget {
|
|||
final progress = userProfile.nextLevelProgress;
|
||||
final expToNext = userProfile.expToNextLevel;
|
||||
|
||||
return Container(
|
||||
return Pressable(
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
|
|
@ -58,8 +60,10 @@ class LevelTitleCard extends ConsumerWidget {
|
|||
children: [
|
||||
Text(
|
||||
'現在の称号',
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
color: appColors.textSecondary,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
|
|
@ -77,9 +81,10 @@ class LevelTitleCard extends ConsumerWidget {
|
|||
child: Text(
|
||||
title,
|
||||
style: GoogleFonts.zenOldMincho(
|
||||
fontSize: 28,
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: appColors.brandPrimary,
|
||||
height: 1.1,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -142,9 +147,10 @@ class LevelTitleCard extends ConsumerWidget {
|
|||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
), // Container
|
||||
); // Pressable
|
||||
}
|
||||
|
||||
|
||||
static Widget _buildLevelHelpContent(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
|
|
|
|||
Loading…
Reference in New Issue