feat: restructure My Page and Sommelier screen layouts
My Page: - LevelTitleCard: show nickname above title when set - Add section header 成長記録 above gamification widgets - Split profile card: basic info (nickname/gender) and sake character (MBTI/sake persona) are now separate named sections Sommelier: - Add section headers テイストプロフィール / MBTI風診断 / さけのわ おすすめ - Widen share button to full width with rounded rect shape - Remove Dividers between sections, use SizedBox(32) spacing instead Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
7797f4eed7
commit
1741e74639
|
|
@ -94,37 +94,32 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
||||||
return SingleChildScrollView(
|
return SingleChildScrollView(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
|
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
|
||||||
child: Column(
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
/* Greeting Removed */
|
// テイストプロフィール
|
||||||
// const SizedBox(height: 8),
|
_buildSectionHeader(context, 'テイストプロフィール', LucideIcons.activity),
|
||||||
|
const SizedBox(height: 8),
|
||||||
Screenshot(
|
Screenshot(
|
||||||
controller: _screenshotController,
|
controller: _screenshotController,
|
||||||
child: _buildShukoCard(context, baseProfile, personalizedTitle, userProfile.nickname), // Pass nickname
|
child: _buildShukoCard(context, baseProfile, personalizedTitle, userProfile.nickname),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 16), // Card下
|
const SizedBox(height: 16),
|
||||||
_buildActionButtons(context),
|
_buildActionButtons(context),
|
||||||
|
const SizedBox(height: 32),
|
||||||
|
|
||||||
const SizedBox(height: 8), // ボタン下(チラ見せ強化)
|
// MBTI風診断
|
||||||
const Divider(),
|
_buildSectionHeader(context, 'MBTI風診断', LucideIcons.brainCircuit),
|
||||||
const SizedBox(height: 16), // 区切り線下
|
const SizedBox(height: 8),
|
||||||
|
_buildMBTIDiagnosisSection(context, userProfile, sakeList),
|
||||||
// --- New: MBTI Diagnosis Section ---
|
const SizedBox(height: 32),
|
||||||
_buildMBTIDiagnosisSection(context, userProfile, sakeList),
|
|
||||||
|
|
||||||
const SizedBox(height: 24),
|
// さけのわ おすすめ
|
||||||
const Divider(),
|
_buildSectionHeader(context, 'さけのわ おすすめ', LucideIcons.trendingUp),
|
||||||
const SizedBox(height: 16),
|
const SizedBox(height: 8),
|
||||||
|
const SakenowaNewRecommendationSection(displayCount: 5),
|
||||||
// --- New: New Sake Recommendations Section ---
|
const SizedBox(height: 16),
|
||||||
const SakenowaNewRecommendationSection(displayCount: 5),
|
const SakenowaRankingSection(displayCount: 10),
|
||||||
|
const SizedBox(height: 32),
|
||||||
const SizedBox(height: 24),
|
|
||||||
const Divider(),
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
|
|
||||||
// --- New: Sakenowa Ranking Section ---
|
|
||||||
const SakenowaRankingSection(displayCount: 10),
|
|
||||||
const SizedBox(height: 32),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
@ -139,6 +134,23 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildSectionHeader(BuildContext context, String title, IconData icon) {
|
||||||
|
final appColors = Theme.of(context).extension<AppColors>()!;
|
||||||
|
return Row(
|
||||||
|
children: [
|
||||||
|
Icon(icon, size: 20, color: appColors.iconDefault),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: appColors.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
Widget _buildShukoCard(BuildContext context, ShukoProfile profile, ShukoTitle titleInfo, String? nickname) {
|
Widget _buildShukoCard(BuildContext context, ShukoProfile profile, ShukoTitle titleInfo, String? nickname) {
|
||||||
final appColors = Theme.of(context).extension<AppColors>()!;
|
final appColors = Theme.of(context).extension<AppColors>()!;
|
||||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||||
|
|
@ -293,26 +305,24 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
|
||||||
|
|
||||||
Widget _buildActionButtons(BuildContext context) {
|
Widget _buildActionButtons(BuildContext context) {
|
||||||
final appColors = Theme.of(context).extension<AppColors>()!;
|
final appColors = Theme.of(context).extension<AppColors>()!;
|
||||||
return Column(
|
return SizedBox(
|
||||||
children: [
|
width: double.infinity,
|
||||||
// SizedBox(width: double.infinity) removed to allow button to size itself
|
child: FilledButton.icon(
|
||||||
FilledButton.icon(
|
onPressed: _isSharing ? null : _shareCard,
|
||||||
onPressed: _isSharing ? null : _shareCard,
|
icon: _isSharing
|
||||||
icon: _isSharing
|
? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
|
||||||
? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
|
: const Icon(LucideIcons.share2),
|
||||||
: const Icon(LucideIcons.share2),
|
label: const Text(
|
||||||
label: const Text(
|
'シェア',
|
||||||
'シェア',
|
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||||
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
|
||||||
),
|
|
||||||
style: FilledButton.styleFrom(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 16), // Wide padding for "Pill" look
|
|
||||||
backgroundColor: appColors.brandPrimary,
|
|
||||||
foregroundColor: appColors.surfaceSubtle,
|
|
||||||
shape: const StadiumBorder(),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
style: FilledButton.styleFrom(
|
||||||
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||||
|
backgroundColor: appColors.brandPrimary,
|
||||||
|
foregroundColor: appColors.surfaceSubtle,
|
||||||
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -38,35 +38,19 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
||||||
padding: const EdgeInsets.all(16),
|
padding: const EdgeInsets.all(16),
|
||||||
children: [
|
children: [
|
||||||
|
|
||||||
// Gamification Section (v1.3)
|
// 成長記録セクションヘッダー
|
||||||
const LevelTitleCard(),
|
_buildSectionHeader(context, '成長記録', LucideIcons.activity, appColors),
|
||||||
const SizedBox(height: 16),
|
|
||||||
const ActivityStats(),
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
const BadgeCase(),
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
|
|
||||||
// Identity Section
|
// Gamification Section
|
||||||
Padding(
|
const LevelTitleCard(),
|
||||||
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
|
const SizedBox(height: 12),
|
||||||
child: Row(
|
const ActivityStats(),
|
||||||
children: [
|
const SizedBox(height: 12),
|
||||||
Icon(
|
const BadgeCase(),
|
||||||
LucideIcons.fingerprint,
|
const SizedBox(height: 24),
|
||||||
size: 20,
|
|
||||||
color: appColors.iconDefault,
|
// プロフィールセクションヘッダー
|
||||||
),
|
_buildSectionHeader(context, t['profile'], LucideIcons.fingerprint, appColors),
|
||||||
const SizedBox(width: 8),
|
|
||||||
Text(
|
|
||||||
t['profile'],
|
|
||||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: appColors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Card(
|
Card(
|
||||||
color: appColors.surfaceSubtle,
|
color: appColors.surfaceSubtle,
|
||||||
child: Column(
|
child: Column(
|
||||||
|
|
@ -86,9 +70,18 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
||||||
trailing: Icon(LucideIcons.chevronRight, color: appColors.iconSubtle),
|
trailing: Icon(LucideIcons.chevronRight, color: appColors.iconSubtle),
|
||||||
onTap: () => _showGenderDialog(context, userProfile.gender, t),
|
onTap: () => _showGenderDialog(context, userProfile.gender, t),
|
||||||
),
|
),
|
||||||
|
],
|
||||||
Divider(height: 1, color: appColors.divider),
|
),
|
||||||
// 1. Real MBTI (User Input) - Core Value for Recommendation
|
),
|
||||||
|
const SizedBox(height: 24),
|
||||||
|
|
||||||
|
// あなたの日本酒キャラセクションヘッダー
|
||||||
|
_buildSectionHeader(context, 'あなたの日本酒キャラ', LucideIcons.sparkles, appColors),
|
||||||
|
Card(
|
||||||
|
color: appColors.surfaceSubtle,
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
// Real MBTI (User Input)
|
||||||
ListTile(
|
ListTile(
|
||||||
leading: Icon(LucideIcons.brainCircuit, color: appColors.iconDefault),
|
leading: Icon(LucideIcons.brainCircuit, color: appColors.iconDefault),
|
||||||
title: Text("あなたのMBTI", style: TextStyle(color: appColors.textPrimary)),
|
title: Text("あなたのMBTI", style: TextStyle(color: appColors.textPrimary)),
|
||||||
|
|
@ -97,7 +90,7 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
||||||
onTap: () => _showRealMbtiDialog(context, userProfile.mbti, t),
|
onTap: () => _showRealMbtiDialog(context, userProfile.mbti, t),
|
||||||
),
|
),
|
||||||
Divider(height: 1, color: appColors.divider),
|
Divider(height: 1, color: appColors.divider),
|
||||||
// 2. Sake Persona (AI Diagnosis) - Entertainment Value
|
// Sake Persona (AI Diagnosis)
|
||||||
ListTile(
|
ListTile(
|
||||||
leading: Icon(LucideIcons.sparkles, color: appColors.brandAccent),
|
leading: Icon(LucideIcons.sparkles, color: appColors.brandAccent),
|
||||||
title: Text(t['mbtiDiagnosis'], style: TextStyle(color: appColors.textPrimary)),
|
title: Text(t['mbtiDiagnosis'], style: TextStyle(color: appColors.textPrimary)),
|
||||||
|
|
@ -111,7 +104,6 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
||||||
),
|
),
|
||||||
trailing: Icon(LucideIcons.chevronRight, color: appColors.iconSubtle),
|
trailing: Icon(LucideIcons.chevronRight, color: appColors.iconSubtle),
|
||||||
onTap: () {
|
onTap: () {
|
||||||
// Navigate to Sommelier Tab (Index 2 in BottomNavBar)
|
|
||||||
ref.read(currentTabIndexProvider.notifier).setIndex(2);
|
ref.read(currentTabIndexProvider.notifier).setIndex(2);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|
@ -138,6 +130,25 @@ class _SoulScreenState extends ConsumerState<SoulScreen> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildSectionHeader(BuildContext context, String title, IconData icon, AppColors appColors) {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: 8, left: 4, right: 4),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Icon(icon, size: 20, color: appColors.iconDefault),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
title,
|
||||||
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: appColors.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Simplified Dialog for Real MBTI Selection
|
// Simplified Dialog for Real MBTI Selection
|
||||||
void _showRealMbtiDialog(BuildContext context, String? current, Translations t) {
|
void _showRealMbtiDialog(BuildContext context, String? current, Translations t) {
|
||||||
final appColors = Theme.of(context).extension<AppColors>()!;
|
final appColors = Theme.of(context).extension<AppColors>()!;
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,13 @@ class LevelTitleCard extends ConsumerWidget {
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
|
if (userProfile.nickname != null && userProfile.nickname!.isNotEmpty) ...[
|
||||||
|
Text(
|
||||||
|
userProfile.nickname!,
|
||||||
|
style: TextStyle(fontSize: 13, color: appColors.textSecondary, letterSpacing: 0.3),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
],
|
||||||
Row(
|
Row(
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
children: [
|
children: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue