feat: Redesign Lite version Pro-lock UX with crown badge and dialog
## UI/UX Improvements (User Feedback Implementation) - Add crown badge to Pro-locked tab icons (Instagram, Analytics, Scan) - Replace full-screen ProLockedScreen with compact AlertDialog - Prevent tab navigation to locked features (show dialog instead) - Follows industry standards (Spotify, Notion, Canva pattern) ## User Experience Benefits 1. Clear visual indicator (crown badge) BEFORE tapping 2. Lightweight dialog instead of full-screen transition 3. No page navigation = smoother, less frustrating experience 4. Reduced "disappointment factor" through expectation management ## Technical Changes - Added `_IconWithCrownBadge` widget for tab icons - Added `_showProOnlyDialog()` method for Pro-only feature alerts - Modified `onDestinationSelected` to intercept locked tab taps - Simplified screens list (locked tabs show HomeScreen dummy) ## Build Optimization - Release APK size: 47.1MB (Lite) / 47.2MB (Pro) - Both versions optimized with tree-shaking and R8 - Single architecture (arm64) for optimal size 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ponshu Developer
parent
494dafe3f2
commit
b600579123
|
|
@ -5,12 +5,44 @@ import '../main.dart'; // Import isProVersion flag
|
|||
import '../providers/theme_provider.dart'; // Access userProfileProvider
|
||||
import '../providers/navigation_provider.dart'; // Track current tab index
|
||||
import '../utils/translations.dart'; // Translation helper
|
||||
import '../widgets/pro_locked_screen.dart'; // Pro版ロック画面
|
||||
import 'home_screen.dart';
|
||||
import 'soul_screen.dart';
|
||||
import 'shop_settings_screen.dart';
|
||||
import 'placeholders/placeholders.dart';
|
||||
|
||||
/// 王冠バッジ付きアイコンウィジェット（Pro限定機能用）
|
||||
class _IconWithCrownBadge extends StatelessWidget {
|
||||
final IconData icon;
|
||||
|
||||
const _IconWithCrownBadge({required this.icon});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Icon(icon),
|
||||
Positioned(
|
||||
right: -4,
|
||||
top: -4,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(2),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.amber.shade600,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
LucideIcons.crown,
|
||||
size: 10,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MainScreen extends ConsumerStatefulWidget {
|
||||
const MainScreen({super.key});
|
||||
|
||||
|
|
@ -21,6 +53,56 @@ class MainScreen extends ConsumerStatefulWidget {
|
|||
class _MainScreenState extends ConsumerState<MainScreen> {
|
||||
int _currentIndex = 0;
|
||||
|
||||
/// Pro限定機能ダイアログを表示
|
||||
void _showProOnlyDialog(BuildContext context, String featureName, IconData featureIcon, String description) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
icon: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Icon(featureIcon, size: 48, color: Colors.grey.shade400),
|
||||
Positioned(
|
||||
right: -8,
|
||||
top: -8,
|
||||
child: Icon(LucideIcons.crown, size: 32, color: Colors.amber.shade600),
|
||||
),
|
||||
],
|
||||
),
|
||||
title: const Text('Pro版限定機能', textAlign: TextAlign.center),
|
||||
content: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
featureName,
|
||||
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
description,
|
||||
style: TextStyle(fontSize: 14, color: Colors.grey.shade700),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Ponshu Room Pro版でこの機能をご利用いただけます。',
|
||||
style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('閉じる'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Listen for mode changes to reset navigation to Home
|
||||
|
|
@ -50,58 +132,39 @@ class _MainScreenState extends ConsumerState<MainScreen> {
|
|||
debugPrint('🔍 MainScreen: IS_PRO_VERSION = $isProVersion, isBusiness = $isBusiness');
|
||||
|
||||
// Define Screens for each mode
|
||||
// Pro版かLite版かで画面を切り替え
|
||||
// Lite版のPro限定タブは表示されないようにダミー画面を配置
|
||||
// （タップ時にダイアログで対応するため、画面遷移は発生しない）
|
||||
final List<Widget> screens = isBusiness
|
||||
? [
|
||||
const HomeScreen(), // Inventory Management (FAB opens Menu Creation)
|
||||
// Instagram Support: Pro版のみ
|
||||
isProVersion
|
||||
? const InstaSupportScreen()
|
||||
: ProLockedScreen(
|
||||
featureName: t['promo'],
|
||||
featureIcon: LucideIcons.instagram,
|
||||
description: userProfile.locale == 'ja'
|
||||
? 'Instagram用の魅力的な投稿を自動生成。\n酒の写真とAI解析を活用して、\nプロモーションをサポートします。'
|
||||
: 'Auto-generate attractive Instagram posts.\nLeverage sake photos and AI analysis\nto boost your promotion.',
|
||||
),
|
||||
// Analytics: Pro版のみ
|
||||
isProVersion
|
||||
? const AnalyticsScreen()
|
||||
: ProLockedScreen(
|
||||
featureName: t['analytics'],
|
||||
featureIcon: LucideIcons.barChart,
|
||||
description: userProfile.locale == 'ja'
|
||||
? '在庫状況や人気銘柄を分析。\nビジネスの意思決定を\nデータで支援します。'
|
||||
: 'Analyze inventory and popular brands.\nSupport business decisions\nwith data insights.',
|
||||
),
|
||||
const HomeScreen(), // Inventory Management
|
||||
isProVersion ? const InstaSupportScreen() : const HomeScreen(), // Instagram Support (Pro only)
|
||||
isProVersion ? const AnalyticsScreen() : const HomeScreen(), // Analytics (Pro only)
|
||||
const ShopSettingsScreen(), // Shop Settings
|
||||
]
|
||||
: [
|
||||
const HomeScreen(), // My Sake List
|
||||
// QR Scan: Pro版のみ
|
||||
isProVersion
|
||||
? const ScanARScreen()
|
||||
: ProLockedScreen(
|
||||
featureName: t['scan'],
|
||||
featureIcon: LucideIcons.scanLine,
|
||||
description: userProfile.locale == 'ja'
|
||||
? 'QRコードをスキャンして、\n酒の情報を素早く登録。\nAR表示で楽しく記録できます。'
|
||||
: 'Scan QR codes to quickly register\nsake information.\nEnjoy recording with AR display.',
|
||||
),
|
||||
const SommelierScreen(),
|
||||
const BreweryMapScreen(),
|
||||
isProVersion ? const ScanARScreen() : const HomeScreen(), // QR Scan (Pro only)
|
||||
const SommelierScreen(), // Sommelier
|
||||
const BreweryMapScreen(), // Map
|
||||
const SoulScreen(), // MyPage/Settings
|
||||
];
|
||||
|
||||
// Define Navigation Items (with translation)
|
||||
// Lite版では王冠バッジを表示
|
||||
final List<NavigationDestination> destinations = isBusiness
|
||||
? [
|
||||
NavigationDestination(
|
||||
icon: const Padding(padding: EdgeInsets.only(bottom: 2), child: Text('🍶', style: TextStyle(fontSize: 22))),
|
||||
label: t['home'],
|
||||
),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.instagram), label: t['promo']),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.barChart), label: t['analytics']),
|
||||
NavigationDestination(
|
||||
icon: isProVersion ? const Icon(LucideIcons.instagram) : const _IconWithCrownBadge(icon: LucideIcons.instagram),
|
||||
label: t['promo'],
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: isProVersion ? const Icon(LucideIcons.barChart) : const _IconWithCrownBadge(icon: LucideIcons.barChart),
|
||||
label: t['analytics'],
|
||||
),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.store), label: t['shop']),
|
||||
]
|
||||
: [
|
||||
|
|
@ -109,7 +172,10 @@ class _MainScreenState extends ConsumerState<MainScreen> {
|
|||
icon: const Padding(padding: EdgeInsets.only(bottom: 2), child: Text('🍶', style: TextStyle(fontSize: 22))),
|
||||
label: t['home'],
|
||||
),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.scanLine), label: t['scan']),
|
||||
NavigationDestination(
|
||||
icon: isProVersion ? const Icon(LucideIcons.scanLine) : const _IconWithCrownBadge(icon: LucideIcons.scanLine),
|
||||
label: t['scan'],
|
||||
),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.sparkles), label: t['sommelier']),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.map), label: t['map']),
|
||||
NavigationDestination(icon: const Icon(LucideIcons.user), label: t['myPage']),
|
||||
|
|
@ -128,6 +194,48 @@ class _MainScreenState extends ConsumerState<MainScreen> {
|
|||
bottomNavigationBar: NavigationBar(
|
||||
selectedIndex: _currentIndex,
|
||||
onDestinationSelected: (index) {
|
||||
// Lite版でPro限定タブをタップした場合はダイアログを表示
|
||||
if (!isProVersion) {
|
||||
if (isBusiness) {
|
||||
// ビジネスモード: Instagram (index 1) と Analytics (index 2) がPro限定
|
||||
if (index == 1) {
|
||||
_showProOnlyDialog(
|
||||
context,
|
||||
t['promo'],
|
||||
LucideIcons.instagram,
|
||||
userProfile.locale == 'ja'
|
||||
? 'Instagram用の魅力的な投稿を自動生成。酒の写真とAI解析を活用して、プロモーションをサポートします。'
|
||||
: 'Auto-generate attractive Instagram posts. Leverage sake photos and AI analysis to boost your promotion.',
|
||||
);
|
||||
return;
|
||||
} else if (index == 2) {
|
||||
_showProOnlyDialog(
|
||||
context,
|
||||
t['analytics'],
|
||||
LucideIcons.barChart,
|
||||
userProfile.locale == 'ja'
|
||||
? '在庫状況や人気銘柄を分析。ビジネスの意思決定をデータで支援します。'
|
||||
: 'Analyze inventory and popular brands. Support business decisions with data insights.',
|
||||
);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 個人モード: Scan (index 1) がPro限定
|
||||
if (index == 1) {
|
||||
_showProOnlyDialog(
|
||||
context,
|
||||
t['scan'],
|
||||
LucideIcons.scanLine,
|
||||
userProfile.locale == 'ja'
|
||||
? 'QRコードをスキャンして、酒の情報を素早く登録。AR表示で楽しく記録できます。'
|
||||
: 'Scan QR codes to quickly register sake information. Enjoy recording with AR display.',
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 通常のタブ遷移
|
||||
setState(() {
|
||||
_currentIndex = index;
|
||||
ref.read(currentTabIndexProvider.notifier).setIndex(index); // Update global tab state
|
||||
|
|
|
|||
Loading…
Reference in New Issue