{ "project_name": "BetPro Tips Flutter App", "description": "Complete implementation guide for recreating the sports betting tips UI in Flutter with API integration", "prerequisites": { "flutter_version": "3.0+", "dart_version": "3.0+", "required_packages": { "http": "^1.1.0", "provider": "^6.0.0", "flutter_animate": "^4.2.0", "glassmorphism": "^3.0.0", "intl": "^0.18.0", "shared_preferences": "^2.2.0" }, "optional_packages": { "cached_network_image": "^3.3.0", "shimmer": "^3.0.0", "flutter_svg": "^2.0.0" } }, "api_structure": { "note": "Assumes your API is ready. Adjust endpoints and models based on your actual API specification", "base_url": "https://your-api.com/api/v1", "endpoints": { "user_balance": { "method": "GET", "path": "/user/balance", "response_model": { "total_profit": "double", "win_rate": "double", "currency": "string" } }, "hot_tips": { "method": "GET", "path": "/tips/hot", "query_params": ["date", "limit"], "response_model": { "tips": [ { "id": "string", "sport": "string", "match_name": "string", "match_time": "string (ISO 8601)", "league": "string", "prediction": "string", "odds": "double", "confidence": "int (0-100)", "is_premium": "boolean" } ] } }, "user_profile": { "method": "GET", "path": "/user/profile", "response_model": { "username": "string", "avatar_url": "string", "subscription_tier": "string" } } } }, "project_structure": { "lib/": { "main.dart": "App entry point with theme configuration", "models/": { "tip_model.dart": "Data model for betting tips", "user_balance_model.dart": "Data model for user balance", "user_profile_model.dart": "Data model for user profile" }, "services/": { "api_service.dart": "HTTP client for API calls", "auth_service.dart": "Authentication handling" }, "providers/": { "tips_provider.dart": "State management for tips data", "user_provider.dart": "State management for user data" }, "screens/": { "home_screen.dart": "Main home screen implementation", "stats_screen.dart": "Statistics screen", "premium_screen.dart": "Premium features screen", "profile_screen.dart": "User profile screen" }, "widgets/": { "balance_card.dart": "Reusable balance card widget", "tip_card.dart": "Reusable tip card widget", "custom_nav_bar.dart": "Bottom navigation bar", "animated_background.dart": "Animated gradient background" }, "theme/": { "app_colors.dart": "Color palette constants", "app_text_styles.dart": "Text style definitions" }, "utils/": { "date_formatter.dart": "Date formatting utilities", "constants.dart": "App-wide constants" } } }, "implementation_steps": [ { "step": 1, "title": "Setup Project and Dependencies", "description": "Initialize Flutter project and add required packages", "commands": [ "flutter create betpro_tips", "cd betpro_tips", "flutter pub add http provider flutter_animate glassmorphism intl shared_preferences" ] }, { "step": 2, "title": "Create Data Models", "description": "Define models matching your API response structure", "file": "lib/models/tip_model.dart", "code_pattern": { "class_name": "TipModel", "fields": [ "String id", "String sport", "String matchName", "DateTime matchTime", "String league", "String prediction", "double odds", "int confidence", "bool isPremium" ], "methods": [ "factory TipModel.fromJson(Map json)", "Map toJson()" ] } }, { "step": 3, "title": "Create API Service", "description": "Build HTTP client to communicate with your API", "file": "lib/services/api_service.dart", "key_methods": { "fetchHotTips": { "return_type": "Future>", "description": "Fetches hot tips from API endpoint", "error_handling": "Use try-catch with custom exceptions" }, "fetchUserBalance": { "return_type": "Future", "description": "Fetches user balance and stats" }, "authenticate": { "return_type": "Future", "description": "Returns auth token for subsequent requests" } }, "notes": [ "Add Bearer token to headers for authenticated requests", "Implement retry logic for failed requests", "Handle HTTP status codes appropriately", "Use base URL from environment variables or constants" ] }, { "step": 4, "title": "Setup State Management", "description": "Create providers for managing app state", "file": "lib/providers/tips_provider.dart", "provider_structure": { "state_variables": [ "List _tips", "bool _isLoading", "String? _error" ], "methods": [ "Future loadTips()", "void refreshTips()", "TipModel? getTipById(String id)" ], "note": "Use ChangeNotifier and call notifyListeners() after state changes" } }, { "step": 5, "title": "Define Theme and Colors", "description": "Create color palette and theme matching the UI design", "file": "lib/theme/app_colors.dart", "color_palette": { "primary_gradient": ["Color(0xFF00F5A0)", "Color(0xFF00D9F5)"], "secondary_gradient": ["Color(0xFF667EEA)", "Color(0xFF764BA2)"], "background_dark": "Color(0xFF1A1A2E)", "background_gradient": ["Color(0xFF0F0C29)", "Color(0xFF302B63)", "Color(0xFF24243E)"], "card_background": "Color(0xFF0D0D1F).withOpacity(0.5)", "gold_accent": "Color(0xFFFFD700)", "success_green": "Color(0xFF00F5A0)", "text_primary": "Colors.white", "text_secondary": "Colors.white.withOpacity(0.7)" } }, { "step": 6, "title": "Build Animated Background Widget", "description": "Create the gradient background with floating animated shapes", "file": "lib/widgets/animated_background.dart", "implementation_notes": [ "Use Stack widget for layering", "AnimatedPositioned for shape movement", "Container with BoxDecoration for gradients", "BackdropFilter for blur effects", "AnimationController with CurvedAnimation for smooth transitions" ], "animation_config": { "duration": "20 seconds per cycle", "curve": "Curves.easeInOut", "shape_count": 2, "blur_sigma": 60.0 } }, { "step": 7, "title": "Create Balance Card Widget", "description": "Build the prominent balance/profit card with glassmorphism", "file": "lib/widgets/balance_card.dart", "widget_structure": { "root": "Container with BoxDecoration (gradient + borderRadius)", "overlay": "Positioned widget with circular shape for accent", "children": [ "Text widget for 'Total Profit This Week' label", "Text widget for profit amount (large, bold)", "Container for win rate badge with blur effect" ] }, "styling": { "border_radius": "25.0", "padding": "EdgeInsets.all(25)", "gradient": "LinearGradient (secondary_gradient colors)", "box_shadow": "BlurStyle.outer with purple tint" } }, { "step": 8, "title": "Create Tip Card Widget", "description": "Build reusable tip card with all betting information", "file": "lib/widgets/tip_card.dart", "widget_props": { "required": [ "TipModel tip" ], "optional": [ "VoidCallback? onTap" ] }, "layout_structure": { "root": "GestureDetector with Container", "decoration": "Glassmorphism effect with blur", "left_border": "4px gradient accent bar", "sections": [ "Header Row: sport badge + confidence indicator", "Match info: team names (bold)", "Match details: league + time", "Footer Row: prediction text + odds badge", "Optional: Premium VIP badge (conditional rendering)" ] }, "interactive": { "onTap": "Scale animation on press", "hero_animation": "Optional for navigation transitions" } }, { "step": 9, "title": "Build Home Screen", "description": "Assemble all widgets into the main home screen", "file": "lib/screens/home_screen.dart", "screen_structure": { "root": "Scaffold with custom background", "body": "Stack containing AnimatedBackground + content", "content": "SingleChildScrollView with Column", "sections": [ "Header: Logo + Profile Icon", "BalanceCard widget", "Section title with fire emoji", "ListView.builder for TipCards (using Provider data)", "Bottom padding for nav bar clearance" ] }, "data_flow": { "initialization": "Call Provider.of(context).loadTips() in initState", "loading_state": "Show shimmer or skeleton loading", "error_state": "Display error message with retry button", "success_state": "Display list of tip cards" }, "pull_to_refresh": { "widget": "RefreshIndicator", "onRefresh": "Call refreshTips() method from provider" } }, { "step": 10, "title": "Create Bottom Navigation Bar", "description": "Build the glassmorphic bottom navigation with blur", "file": "lib/widgets/custom_nav_bar.dart", "implementation": { "positioning": "Positioned at bottom with SafeArea", "styling": "ClipRRect + BackdropFilter for blur effect", "items": [ {"icon": "Icons.home", "label": "Home"}, {"icon": "Icons.bar_chart", "label": "Stats"}, {"icon": "Icons.star", "label": "Premium"}, {"icon": "Icons.person", "label": "Profile"} ], "active_indicator": "Color change + scale animation", "navigation": "Use Navigator.push or bottom navigation controller" } }, { "step": 11, "title": "Implement Main App Entry", "description": "Configure app theme and providers", "file": "lib/main.dart", "configuration": { "providers": "Wrap MaterialApp with MultiProvider", "theme": { "brightness": "Brightness.dark", "primaryColor": "AppColors.successGreen", "scaffoldBackgroundColor": "AppColors.backgroundDark", "fontFamily": "'Segoe UI' or default system font" }, "initial_route": "HomeScreen", "debug_banner": false } }, { "step": 12, "title": "Add Loading States and Error Handling", "description": "Implement shimmer loading and error screens", "files": [ "lib/widgets/loading_card.dart", "lib/widgets/error_widget.dart" ], "loading_approach": { "shimmer_package": "Use shimmer package for skeleton screens", "placeholder_cards": "3-4 animated placeholder tip cards", "color_scheme": "Grey tones matching dark theme" }, "error_handling": { "display": "Centered widget with error icon and message", "retry_button": "Styled button to retry API call", "offline_detection": "Check connectivity before API calls" } }, { "step": 13, "title": "Implement Date Formatting", "description": "Format match times for display", "file": "lib/utils/date_formatter.dart", "utility_functions": { "formatMatchTime": { "input": "DateTime", "output": "String (e.g., 'Today 18:00', 'Tomorrow 21:30')", "logic": "Compare with current date, format accordingly" }, "isToday": { "input": "DateTime", "output": "bool" } } }, { "step": 14, "title": "Add Animations and Polish", "description": "Enhance UI with smooth animations", "animation_targets": [ { "element": "Fire emoji in section title", "animation": "Pulsing scale (1.0 to 1.2)", "duration": "2 seconds loop" }, { "element": "Floating background shapes", "animation": "Translate + scale variations", "duration": "20 seconds loop" }, { "element": "Tip cards on appear", "animation": "Fade in + slide up", "stagger": "100ms between cards" }, { "element": "Nav bar items on tap", "animation": "Scale down to 0.9 then back", "duration": "200ms" } ] }, { "step": 15, "title": "Test with API", "description": "Connect to your actual API and test all flows", "testing_checklist": [ "Verify API endpoints return expected data format", "Test authentication flow with valid/invalid credentials", "Handle empty states (no tips available)", "Test error scenarios (network failure, 500 errors)", "Verify date formatting across timezones", "Test pull-to-refresh functionality", "Check performance with large lists (20+ tips)", "Test navigation between screens", "Verify VIP badge shows only for premium tips" ] } ], "key_widgets_summary": { "AnimatedBackground": "Gradient with floating animated blur shapes", "BalanceCard": "Glassmorphic card showing profit and win rate", "TipCard": "Card displaying betting tip with all details", "CustomNavBar": "Bottom navigation with blur effect", "LoadingCard": "Shimmer skeleton during data fetch", "ErrorWidget": "Error display with retry option" }, "api_integration_notes": [ "Store API base URL in constants or environment variables", "Use interceptors to add authentication tokens to all requests", "Implement token refresh mechanism if using JWT", "Cache responses locally using shared_preferences for offline access", "Add request timeout (e.g., 30 seconds)", "Log API errors for debugging (remove in production)", "Consider using dio package instead of http for advanced features", "Implement rate limiting awareness if API has restrictions" ], "performance_optimization": [ "Use const constructors where possible", "Implement list view with itemExtent for better scrolling", "Cache images using cached_network_image package", "Lazy load tips (pagination) if API supports it", "Use ListView.builder instead of ListView for large lists", "Minimize setState calls, use Provider properly", "Profile performance with Flutter DevTools" ], "design_system_values": { "spacing": { "xs": "4.0", "sm": "8.0", "md": "16.0", "lg": "24.0", "xl": "32.0" }, "border_radius": { "small": "10.0", "medium": "15.0", "large": "25.0", "circle": "999.0" }, "font_sizes": { "display": "36.0", "title": "28.0", "heading": "20.0", "body": "16.0", "caption": "13.0", "label": "11.0" }, "font_weights": { "regular": "FontWeight.w400", "medium": "FontWeight.w600", "bold": "FontWeight.w700", "extra_bold": "FontWeight.w900" } }, "next_steps": [ "Implement remaining screens (Stats, Premium, Profile)", "Add tip details screen when card is tapped", "Implement push notifications for new hot tips", "Add filters for sports types", "Create bet tracking functionality", "Add social features (share tips)", "Implement in-app purchases for premium tier", "Add analytics tracking", "Submit to app stores" ], "resources": { "flutter_docs": "https://docs.flutter.dev", "provider_package": "https://pub.dev/packages/provider", "flutter_animate": "https://pub.dev/packages/flutter_animate", "glassmorphism": "https://pub.dev/packages/glassmorphism", "http_package": "https://pub.dev/packages/http" } }