Skip to content

SeifShaheen/XP-Store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

5 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽฎ XP Gaming Store

A comprehensive Flutter gaming store application with authentication, product browsing, cart functionality, and Arabic localization support.

๐Ÿš€ Features

1. Aesthetic Welcome Screen

  • Gaming-themed UI with dark gradient backgrounds
  • Custom Suwannaphum font with bold, colored typography
  • Two gaming icons representing local and online gaming experiences
  • Sign Up and Sign In buttons with smooth navigation
  • Centered layout with adequate spacing and modern design

2. User Authentication

  • Sign-Up Form with comprehensive validation
  • Sign-In Form with email and password validation
  • Success dialogs with smooth transitions to main app
  • Form validation with user-friendly error messages

3. Gaming Store Interface

  • "Our Games" AppBar with shopping cart indicator
  • Featured Games Section with horizontal PageView
  • Responsive GridView showing game cards (2 per row)
  • Add to Cart functionality with SnackBar notifications
  • Hot Offers Section with vertical ListView
  • Cart counter showing number of items

4. Smooth Animations

  • Fade transitions between authentication and main screens
  • Page indicators for featured games carousel
  • Floating SnackBars for user feedback
  • Smooth navigation with custom page transitions

5. Arabic Localization

  • Complete Arabic translation of all UI text
  • RTL support for Arabic language
  • Localized strings using .arb files
  • No hardcoded strings in UI code

๐Ÿ› ๏ธ Technical Implementation

Core Dart Concepts Applied

  • Variables and Constants: Game data, user information
  • Lists and Maps: Game collections, cart management
  • Control Flow: Form validation, conditional rendering
  • Functions: Validation methods, data processing
  • Object-Oriented Programming: Game and User models

Flutter Widgets Used

  • StatelessWidget: Welcome screen, game cards
  • StatefulWidget: Authentication forms, shopping screen
  • Form Validation: TextFormField with custom validators
  • Navigation: PageRouteBuilder with custom transitions
  • Layout Widgets: Column, Row, GridView, ListView, PageView

Architecture

  • Modular Structure: Separate files for models, screens, widgets
  • Clean Code: Clear naming conventions and organized structure
  • Responsive Design: Adaptive layouts for different screen sizes
  • State Management: Local state with setState for cart and UI

๐Ÿ“ฑ Screenshots

Welcome Screen

  • Dark gaming theme with green accent colors
  • Gaming icons and modern typography
  • Call-to-action buttons for authentication

Authentication Screens

  • Clean form design with validation
  • Success dialogs with smooth transitions
  • User-friendly error messages

Shopping Screen

  • Featured games carousel
  • Grid layout for all games
  • Hot offers section
  • Shopping cart functionality

Project Structure

lib/
โ”œโ”€โ”€ main.dart                 # App entry point
โ”œโ”€โ”€ models/
โ”‚   โ”œโ”€โ”€ game.dart            # Game data model
โ”‚   โ””โ”€โ”€ user.dart            # User authentication model
โ”œโ”€โ”€ screens/
โ”‚   โ”œโ”€โ”€ welcome_screen.dart  # Welcome/intro screen
โ”‚   โ”œโ”€โ”€ signup_screen.dart   # User registration
โ”‚   โ”œโ”€โ”€ signin_screen.dart   # User login
โ”‚   โ””โ”€โ”€ shopping_screen.dart # Main store interface
โ”œโ”€โ”€ widgets/                 # Reusable UI components
โ””โ”€โ”€ l10n/
    โ”œโ”€โ”€ app_localizations.dart # Localization setup
    โ”œโ”€โ”€ app_en.arb           # English translations
    โ””โ”€โ”€ app_ar.arb           # Arabic translations

assets/
โ”œโ”€โ”€ images/                  # Game images and icons
โ””โ”€โ”€ fonts/                   # Custom font files

๐ŸŽฏ Key Features Demonstrated

1. Form Validation

  • Real-time validation with custom error messages
  • Email format checking
  • Password strength requirements
  • Name capitalization validation

2. Navigation & Transitions

  • Custom page transitions with fade effects
  • Proper navigation stack management
  • Back button handling

3. State Management

  • Local state management with setState
  • Cart functionality with item counting
  • Form state handling

4. UI/UX Design

  • Modern gaming aesthetic
  • Consistent color scheme
  • Responsive layouts
  • Accessibility considerations

5. Internationalization

  • Arabic language support
  • RTL layout compatibility
  • Localized strings management

๐Ÿ”ง Customization

Adding New Games

Edit lib/models/game.dart to add new games to the store:

Game(
  id: 'new_game_id',
  title: 'New Game Title',
  imageUrl: 'game_image_url',
  price: 49.99,
  description: 'Game description',
  category: 'Action',
  rating: 4.5,
  isFeatured: true,
)

Modifying UI Colors

Update the color scheme in individual screen files:

const Color(0xFF00FF88) // Primary green
const Color(0xFF0A0A0A) // Dark background
const Color(0xFF1A1A1A) // Card background

Adding New Languages

  1. Create new .arb file in lib/l10n/
  2. Add translations to app_localizations.dart
  3. Update supportedLocales list

๐Ÿ“‹ Requirements Fulfilled

โœ… Aesthetic Welcome Screen

  • AppBar with custom title
  • Two images (local + online gaming icons)
  • Suwannaphum font with custom styling
  • Centered layout with proper spacing
  • Sign Up and Sign In buttons

โœ… Authentication System

  • Sign-up form with full validation
  • Sign-in form with email/password
  • Success dialogs with navigation
  • Form validation with user feedback

โœ… Smooth Transitions

  • Fade animations between screens
  • Custom page transitions
  • Seamless user experience

โœ… Shopping Interface

  • "Our Games" AppBar
  • Featured games PageView
  • Responsive GridView (2 per row)
  • Add to cart with SnackBar
  • Hot offers ListView

โœ… Arabic Localization

  • Complete Arabic translations
  • RTL support
  • .arb file implementation
  • No hardcoded strings

โœ… Code Quality

  • Modular widget structure
  • Clean, documented code
  • Proper file organization
  • Best practices implementation

๐ŸŽฎ Gaming Theme Elements

  • Dark color scheme with neon green accents
  • Gaming icons (controller, esports symbols)
  • Modern typography with bold headings
  • Gradient backgrounds for visual appeal
  • Interactive elements with hover effects
  • Gaming terminology throughout the UI

๐Ÿ“ฑ Platform Support

  • โœ… Android
  • โœ… iOS
  • โœ… Web
  • โœ… Windows
  • โœ… macOS
  • โœ… Linux

๐Ÿค Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

Level up your Flutter development skills with this complete gaming store application! ๐Ÿš€

About

An ecommerce project made while learning more about translation and using the json and l10 in it so it was basic one using mock data but the new part it the translation.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors