mai
/
ponshu-room-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 31 Wiki Activity

feat(ponshu-room): Phase 3 UI — Bento Grid stats + progress bar animation 

- activity_stats: Bento Grid layout (大カード×1 + 小カード×2) with AppColors tokens
- level_title_card: TweenAnimationBuilder progress bar (0→value, 900ms easeOutCubic)
- version bump: 1.0.20+31 → 1.0.21+32

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ponshu Developer 2026-04-06 17:04:20 +09:00
parent db4af36f8b
commit 9587991999
3 changed files with 146 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
lib/widgets/gamification/activity_stats.dart
View File

@ -1,10 +1,9 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lucide_icons/lucide_icons.dart'; import 'package:lucide_icons/lucide_icons.dart';
import '../../providers/sake_list_provider.dart'; import '../../providers/sake_list_provider.dart';
import '../../models/schema/item_type.dart'; import '../../models/schema/item_type.dart';
import '../../theme/app_colors.dart';
class ActivityStats extends ConsumerWidget { class ActivityStats extends ConsumerWidget {
const ActivityStats({super.key}); const ActivityStats({super.key});
@ -15,75 +14,144 @@ class ActivityStats extends ConsumerWidget {
return allSakeAsync.when( return allSakeAsync.when(
data: (sakes) { data: (sakes) {
// Phase D5: Exclude set products from activity statistics (sets contain multiple items) final individualSakes = sakes.where((s) => s.itemType == ItemType.sake).toList();
final individualSakes = sakes.where((s) => s.itemType == ItemType.sake).toList();
final totalSakes = individualSakes.length; final totalSakes = individualSakes.length;
final favoriteCount = individualSakes.where((s) => s.userData.isFavorite).length; final favoriteCount = individualSakes.where((s) => s.userData.isFavorite).length;
// Recording Days final dates = individualSakes.map((s) {
final dates = individualSakes.map((s) { final d = s.metadata.createdAt;
final d = s.metadata.createdAt; return DateTime(d.year, d.month, d.day);
return DateTime(d.year, d.month, d.day); }).toSet();
}).toSet(); final recordingDays = dates.length;
final recordingDays = dates.length;
return Container( final appColors = Theme.of(context).extension<AppColors>()!;
padding: const EdgeInsets.all(16),
decoration: BoxDecoration( // Bento Grid: 総登録数を大カード、お気に入り・撮影日数を小カード2枚横並び
color: Theme.of(context).cardColor, return Column(
borderRadius: BorderRadius.circular(16), children: [
border: Border.all( // 大カード — 総登録数
color: Theme.of(context).dividerColor.withValues(alpha: 0.1), _BentoCard(
child: Row(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: appColors.brandPrimary.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(LucideIcons.wine, size: 28, color: appColors.brandPrimary),
),
const SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'$totalSakes本',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w900,
color: appColors.brandPrimary,
height: 1.0,
),
),
const SizedBox(height: 4),
Text(
'総登録数',
style: TextStyle(
fontSize: 12,
color: appColors.textSecondary,
fontWeight: FontWeight.w500,
),
),
],
),
],
), ),
), ),
child: Column( const SizedBox(height: 8),
crossAxisAlignment: CrossAxisAlignment.start, // 小カード2枚横並び
children: [ Row(
Text( children: [
'あなたの活動深度', Expanded(
style: Theme.of(context).textTheme.titleSmall?.copyWith( child: _BentoCard(
fontWeight: FontWeight.bold, child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(LucideIcons.heart, size: 20, color: appColors.brandAccent),
const SizedBox(height: 8),
Text(
'$favoriteCount本',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w900,
color: appColors.textPrimary,
height: 1.0,
),
),
const SizedBox(height: 4),
Text(
'お気に入り',
style: TextStyle(fontSize: 11, color: appColors.textSecondary),
),
],
),
), ),
), ),
const SizedBox(height: 16), const SizedBox(width: 8),
Row( Expanded(
mainAxisAlignment: MainAxisAlignment.spaceAround, child: _BentoCard(
children: [ child: Column(
_buildStatItem(context, '総登録数', '$totalSakes本', LucideIcons.wine), crossAxisAlignment: CrossAxisAlignment.start,
_buildStatItem(context, 'お気に入り', '$favoriteCount本', LucideIcons.heart), children: [
_buildStatItem(context, '撮影日数', '$recordingDays日', LucideIcons.calendar), Icon(LucideIcons.calendar, size: 20, color: appColors.iconDefault),
// _buildStatItem(context, '平均価格', '¥$avgPrice', LucideIcons.banknote), // Hidden per user request const SizedBox(height: 8),
], Text(
), '$recordingDays日',
], style: TextStyle(
), fontSize: 22,
); fontWeight: FontWeight.w900,
color: appColors.textPrimary,
height: 1.0,
),
),
const SizedBox(height: 4),
Text(
'撮影日数',
style: TextStyle(fontSize: 11, color: appColors.textSecondary),
),
],
),
),
),
],
),
],
);
}, },
loading: () => const SizedBox.shrink(), loading: () => const SizedBox.shrink(),
error: (_, _) => const SizedBox.shrink(), error: (_, _) => const SizedBox.shrink(),
); );
} }
}
Widget _buildStatItem(BuildContext context, String label, String value, IconData icon) { class _BentoCard extends StatelessWidget {
return Column( const _BentoCard({required this.child});
children: [ final Widget child;
Icon(icon, size: 20, color: Colors.grey[400]),
const SizedBox(height: 8), @override
Text( Widget build(BuildContext context) {
value, return Container(
style: TextStyle( width: double.infinity,
fontSize: 14, padding: const EdgeInsets.all(16),
fontWeight: FontWeight.w900, decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onSurface, color: Theme.of(context).cardColor,
), borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Theme.of(context).dividerColor.withValues(alpha: 0.1),
), ),
const SizedBox(height: 4), ),
Text( child: child,
label,
style: TextStyle(fontSize: 10, color: Colors.grey[600]),
),
],
); );
} }
} }

25
lib/widgets/gamification/level_title_card.dart
View File

@ -115,15 +115,22 @@ class LevelTitleCard extends ConsumerWidget {
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
// Progress Bar // Progress Bar (animated 0 → actual value on mount)
ClipRRect( TweenAnimationBuilder<double>(
borderRadius: BorderRadius.circular(4), tween: Tween<double>(begin: 0.0, end: progress),
child: LinearProgressIndicator( duration: const Duration(milliseconds: 900),
value: progress, curve: Curves.easeOutCubic,
minHeight: 8, builder: (context, value, _) {
backgroundColor: appColors.divider, return ClipRRect(
valueColor: AlwaysStoppedAnimation<Color>(appColors.brandPrimary), borderRadius: BorderRadius.circular(4),
), child: LinearProgressIndicator(
value: value,
minHeight: 8,
backgroundColor: appColors.divider,
valueColor: AlwaysStoppedAnimation<Color>(appColors.brandPrimary),
),
);
},
), ),
const SizedBox(height: 8), const SizedBox(height: 8),

2
pubspec.yaml
View File

@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts # In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix. # of the product and file versions while build-number is used as the build suffix.
version: 1.0.20+31 version: 1.0.21+32
environment: environment:
sdk: ^3.10.1 sdk: ^3.10.1