## File: README.md

# Open Source eCommerce Mobile App

[Bagisto](https://bagisto.com/en/) revolutionizes the world of mobile commerce with its open-source eCommerce mobile app solution. This open-source mobile ecommerce app seamlessly transforms your Bagisto store into a powerful mobile platform, providing real-time synchronization of products and categories. With a user-friendly interface, managing orders becomes a breeze, making it an essential tool for tech-savvy individuals and those new to eCommerce.

This mobile app, built on the foundation of the Bagisto eCommerce framework and leveraging the robust Laravel stack, offers many features for a comprehensive and efficient mobile shopping experience. The app ensures easy product information management and accelerates time-to-market for your products, all while giving you complete control over your store.

# Live Demo

Android: <https://play.google.com/store/apps/details?id=com.webkul.bagisto.mobikul>

iOS: <https://apps.apple.com/us/app/mobikul-bagisto-laravel-app/id6447519140>

# Features

The open-source ecommerce mobile app comes with an array of features to improve your customers' shopping experience.

## Interactive Home Page and Search



## All Type Product Supported



## Dark Mode and Push Notification 



## Discount Coupons and Guest Checkout



## Wishlist and Product Category



## Order Details and Product Reviews



## Installation Guide

Before beginning with the installation, you will need the following with the mentioned versions

- Bagisto Version - Bagisto v2.0.0 or higher
- Android Studio Meerkat | 2024.3.2
- Flutter Version - 3.38.9
- Dart - 3.10.8
- Xcode - 26.3
- Swift - 6.1

Make sure you have installed the [API module](https://github.com/bagisto/bagisto-api) and set this up properly on your bagisto.

> NOTE: It is recommended that you run a simple Hello World program in Flutter first before proceeding further so that you are sure that the environment is properly set up.

## Installation Steps

### Clone the repository

- Open your terminal or command prompt
- Navigate to the directory where you want to save the project
- Use the git clone command followed by the repository URL

```sh
git clone https://github.com/bagisto/opensource-ecommerce-mobile-app.git
```

### Install dependencies

- Navigate to the project's directory

```sh
cd <repository-name>
```

- Run the following command to install the required packages

```sh
flutter pub get
```

### Connect a device or emulator

- Physical Device

  1. Enable USB debugging on your device
  2. Connect it to your computer using a USB cable.

- Emulator

  1. Start an Android or iOS emulator using your preferred IDE or tools.

### Run the Project

- Use the following command to build and run the project

```sh
flutter run
```

## Minimum Versions

- Android: 22
- iOS: 15.5

## Configurations Steps

### For Setup

Change the baseDomain  as per your store

Go to `lib/core/constants/api_constants.dart` and configure the following:

```dart
/// Bagisto GraphQL endpoint (e.g., https://your-bagisto-server.com/graphql)
const String bagistoEndpoint = 'YOUR_BAGISTO_ENDPOINT_HERE';

/// Storefront key for Bagisto API
/// Get this from your Bagisto admin panel
const String storefrontKey = 'YOUR_STOREFRONT_KEY_HERE';

/// Company name (optional metadata)
const String companyName = 'Your Company Name';
```

### For Theme

In the `AppColors` class, find and modify the primary colors:

```dart
class AppColors {
  // Primary Colors - Modify these hex values to change the app's primary color
  static const Color primary500 = Color(0xFFFF6900);  // Main primary color
  static const Color primary600 = Color(0xFFF54900);  // Darker variant for pressed states
  // ...
}
```

**To change the primary color:**
- Replace `0xFFFF6900` with your desired color hex value
- Adjust `primary600` to a slightly darker shade of your primary color

### For Push Notification Service

- Android

Replace "google-services.json".

- iOS

Replace "GoogleService-Info.plist".

> Helpful Articles

> Android  → <https://mobikul.com/knowledgebase/generating-google-service-file-enable-fcm-firebase-cloud-messaging-android-application/>

> iOS → <https://mobikul.com/knowledgebase/generating-new-googleservice-info-plist-file-fcm-based-project-ios-app/>

### For Application Title

- Android

  1. **Path:** android/app/src/main/AndroidManifest.xml
  2. **Change app name:** android:label="***********"

- iOS

  1. Go to the general tab and identity change the display name to your app name

### For Splash Screen

- For adding an Image as a Splash Screen

  1. **Path:** assets/images/splash.png
  2. No additional constant update is required. The splash image is loaded directly in `lib/features/splash/presentation/splash_screen.dart`.

### For App Icon

- **Android:** Open the android folder in Android Studio and then right click app > new > Image Asset set Image.
- **iOS:** Replace the icons over the path > ios/Runner/Assets.xcassets/AppIcon.appiconset

## Installation Video

[](https://www.youtube.com/watch?v=EbXpRK6teCY)

## API Documentation

For the API Documentation, please go through - <https://api-docs.bagisto.com/api/graphql-api/introduction.html>

## Usage

For detailed usage instructions, refer to the official documentation

## Contributing

Contributions are welcome! Follow the contribution guidelines to get started.

## License

Bagisto is open-sourced software licensed under the MIT license.

---

## File: Docs/ColorSetUp.md

# Color Setup Guide

This document explains how to customize colors in the Bagisto Flutter app.

## Color Architecture

The app uses a centralized color system defined in `lib/core/theme/app_theme.dart`. All colors are defined in the `AppColors` class and are used throughout the application.

## Steps to Customize Colors

### 1. Locate the Theme File

Navigate to:
```
lib/core/theme/app_theme.dart
```

### 2. Modify Primary Colors

In the `AppColors` class, find and modify the primary colors:

```dart
class AppColors {
  // Primary Colors - Modify these hex values to change the app's primary color
  static const Color primary500 = Color(0xFFFF6900);  // Main primary color
  static const Color primary600 = Color(0xFFF54900);  // Darker variant for pressed states
  // ...
}
```

**To change the primary color:**
- Replace `0xFFFF6900` with your desired color hex value
- Adjust `primary600` to a slightly darker shade of your primary color

### 3. Color Categories Available

The app defines several color categories:

| Category | Description |
|----------|-------------|
| **Primary** | Main brand colors (primary500, primary600) |
| **Neutral** | Grayscale palette (neutral50-neutral900) for backgrounds, text, borders |
| **Status** | Success colors (green shades for success states) |
| **Process** | Info/blue colors (process600, process700) |
| **Static** | Basic colors (white, black) |

### 4. How Colors Are Used

The colors are consumed in multiple ways:

**Directly via AppColors class:**
```dart
Container(
  color: AppColors.primary500,
  child: Text(
    'Hello',
    style: TextStyle(color: AppColors.neutral900),
  ),
)
```

**Via ThemeData (Material 3):**
```dart
ThemeData(
  colorScheme: const ColorScheme.light(
    primary: AppColors.primary500,
    secondary: AppColors.primary600,
  ),
)
```

**Via TextStyles:**
```dart
TextStyle(
  color: AppColors.primary500,
)
```

### 5. Dark Mode Support

The app supports both light and dark themes. Colors automatically adjust based on the theme:

- Light theme uses: neutral50-neutral800 for backgrounds and text
- Dark theme uses: neutral800-neutral900 for backgrounds, neutral200 for text

### 6. Theme Switching

To toggle between light and dark themes programmatically:

```dart
context.read().toggleTheme();
```

Or set a specific theme:
```dart
context.read().setLight();
context.read().setDark();
```

## Color Hex Value Format

Flutter uses the format `0xFF` followed by 6 hexadecimal digits:
- `0xFF` = Alpha channel (fully opaque)
- First 2 digits = Red
- Middle 2 digits = Green
- Last 2 digits = Blue

Examples:
- White: `0xFFFFFFFF`
- Black: `0xFF000000`
- Orange: `0xFFFF6900`
- Blue: `0xFF155DFC`

## Best Practices

1. **Maintain contrast**: Ensure text colors have sufficient contrast with backgrounds
2. **Primary color consistency**: Use primary500 for main actions and primary600 for pressed states
3. **Semantic colors**: Use status colors (successGreen) for feedback messages
4. **Test both themes**: Verify colors work well in both light and dark modes

---

## File: Docs/ConfigGuide.md

# Configuration Guide

This guide explains how to configure the Bagisto Flutter app for your specific needs.

---

## Table of Contents

1. [API Configuration](#api-configuration)
2. [Theme & Color Configuration](#theme--color-configuration)
3. [Application Title](#application-title)
4. [App Icons](#app-icons)
5. [Splash Screen](#splash-screen)
6. [Permissions Configuration](#permissions-configuration)
7. [Push Notifications (Firebase)](#push-notifications-firebase)
8. [Language & Localization Configuration](#language--localization-configuration)
9. [GraphQL Configuration](#graphql-configuration)
10. [Summary of Configuration Files](#summary-of-configuration-files)

---

## API Configuration

Configure the Bagisto API endpoint and storefront key:

**File:** [`lib/core/constants/api_constants.dart`](../lib/core/constants/api_constants.dart)

```dart
/// Bagisto API endpoint
const String bagistoEndpoint = 'https://your-bagisto-domain.com/graphql';

/// Storefront key for Bagisto API
const String storefrontKey = 'your_storefront_key';

/// Company name
const String companyName = 'Your Company Name';
```

### Steps:
1. Open [`lib/core/constants/api_constants.dart`](../lib/core/constants/api_constants.dart)
2. Replace `bagistoEndpoint` with your Bagisto GraphQL endpoint
3. Replace `storefrontKey` with your storefront API key from Bagisto Admin
4. Update `companyName` to your company name

---

## Theme & Color Configuration

Customize the app's primary colors and theme:

**File:** [`lib/core/theme/app_theme.dart`](../lib/core/theme/app_theme.dart)

### Primary Colors

In the [`AppColors`](../lib/core/theme/app_theme.dart) class, modify the primary colors:

```dart
class AppColors {
  // Primary Colors
  static const Color primary500 = Color(0xFFFF6900);  // Main primary color (Orange)
  static const Color primary600 = Color(0xFFF54900);  // Darker variant for pressed states
  
  // Neutral Colors - Light Theme
  static const Color neutral50 = Color(0xFFFAFAFA);
  static const Color neutral100 = Color(0xFFF5F5F5);
  static const Color neutral200 = Color(0xFFE5E5E5);
  static const Color neutral300 = Color(0xFFD4D4D4);
  static const Color neutral400 = Color(0xFFA1A1A1);
  static const Color neutral500 = Color(0xFF737373);
  static const Color neutral600 = Color(0xFF525252);
  static const Color neutral700 = Color(0xFF404040);
  static const Color neutral800 = Color(0xFF262626);
  static const Color neutral900 = Color(0xFF171717);

  // Status Colors
  static const Color successGreen = Color(0xFF00A63E);
  static const Color success50 = Color(0xFFF0FDF4);
  static const Color success500 = Color(0xFF00C950);
  static const Color success700 = Color(0xFF008236);

  // Process / Info Colors
  static const Color process600 = Color(0xFF155DFC);
  static const Color process700 = Color(0xFF1447E6);

  // Static Colors
  static const Color white = Color(0xFFFFFFFF);
  static const Color black = Color(0xFF000000);
}
```

### Theme Configuration

The app supports both Light and Dark themes configured in the [`AppTheme`](../lib/core/theme/app_theme.dart) class:

- **Light Theme:** Uses white backgrounds with neutral-900 text
- **Dark Theme:** Uses neutral-900 backgrounds with neutral-200 text

Both themes use Material3 design with Roboto font family.

For detailed color customization, see [ColorSetUp.md](./ColorSetUp.md).

---

## Application Title

### Android

**File:** [`android/app/src/main/AndroidManifest.xml`](../android/app/src/main/AndroidManifest.xml)

Find and modify the `android:label` attribute:

```xml
<application
    android:label="Your App Name"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">
```

Current default: `Mobikul Bagisto Laravel App`

### iOS

**File:** [`ios/Runner/Info.plist`](../ios/Runner/Info.plist)

Find and modify the `CFBundleDisplayName` key:

```xml
<key>CFBundleDisplayName</key>
<string>Your App Name</string>
```

Current default: `Mobikul Bagisto Laravel App`

---

## App Icons

### Android

1. Open the `android` folder in Android Studio
2. Right-click on `app` → New → Image Asset
3. Set your custom icon image

**Icon Location:** [`android/app/src/main/res/mipmap-xxxhdpi/`](../android/app/src/main/res/mipmap-xxxhdpi/)

### iOS

**File:** [`ios/Runner/Assets.xcassets/AppIcon.appiconset/`](../ios/Runner/Assets.xcassets/AppIcon.appiconset/)

Replace the existing app icon images with your custom icons. Use Xcode's AppIcon template for proper sizing.

---

## Splash Screen

### Android

**File:** [`android/app/src/main/res/drawable-v21/launch_background.xml`](../android/app/src/main/res/drawable-v21/launch_background.xml)

Modify the splash background:

```xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
</layer-list>
```

### iOS

**File:** [`ios/Runner/Assets.xcassets/LaunchImage.imageset/`](../ios/Runner/Assets.xcassets/LaunchImage.imageset/)

Replace the following files with your custom splash image:
- `LaunchImage.png` (1x)
- `LaunchImage@2x.png` (2x)
- `LaunchImage@3x.png` (3x)

Also update [`ios/Runner/Assets.xcassets/splash.imageset/`](../ios/Runner/Assets.xcassets/splash.imageset/) for Flutter splash.

---

## Permissions Configuration

The app requires several permissions for full functionality:

### Android Permissions

**File:** [`android/app/src/main/AndroidManifest.xml`](../android/app/src/main/AndroidManifest.xml)

```xml












```

### iOS Permissions

**File:** [`ios/Runner/Info.plist`](../ios/Runner/Info.plist)

```xml

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to capture photos for image-based product search.</string>


<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for voice search functionality.</string>


<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to your photo library to select images for product search.</string>
<key>NSPhotoLibraryAddOnlyUsageDescription</key>
<string>This app needs permission to save photos from your camera.</string>


<key>NSSpeechRecognitionUsageDescription</key>
<string>This app uses speech recognition for voice search.</string>
```

---

## Push Notifications (Firebase)

To enable Firebase Cloud Messaging (Push Notifications), replace the dummy configuration files:

### Android

**File:** [`android/app/google-services.json`](../android/app/google-services.json)

Replace this file with your Firebase configuration file from the [Firebase Console](https://console.firebase.google.com/):

1. Go to Firebase Console → Project Settings → General
2. Click "Add App" → Android
3. Download `google-services.json`
4. Replace the existing file in `android/app/`

### iOS

**File:** [`ios/Runner/GoogleService-Info.plist`](../ios/Runner/GoogleService-Info.plist)

Replace this file with your Firebase configuration file:

1. Go to Firebase Console → Project Settings → General
2. Click "Add App" → iOS
3. Download `GoogleService-Info.plist`
4. Replace the existing file in `ios/Runner/`

> **Note:** The current files contain dummy values and must be replaced with your actual Firebase project configuration for push notifications to work.

---

## Language & Localization Configuration

The app already includes Flutter localization support and a language selector backed by Bagisto locale data.

### Current Supported Languages

The current app build supports these locales:

- `ar` - Arabic
- `de` - German
- `en` - English
- `es` - Spanish
- `fr` - French
- `it` - Italian
- `nl` - Dutch
- `ru` - Russian
- `tr` - Turkish
- `uk` - Ukrainian

These locales are generated from the ARB files inside [`lib/l10n/`](../lib/l10n/).

### Core Localization Files

| Purpose | File |
|---------|------|
| Enable Flutter localization generation | [`pubspec.yaml`](../pubspec.yaml) |
| Localization generator config | [`l10n.yaml`](../l10n.yaml) |
| Base translation template | [`lib/l10n/app_en.arb`](../lib/l10n/app_en.arb) |
| Generated supported locales and delegates | [`lib/l10n/app_localizations.dart`](../lib/l10n/app_localizations.dart) |
| Apply locale to `MaterialApp` | [`lib/main.dart`](../lib/main.dart) |
| Save selected locale in storage | [`lib/core/locale/locale_cubit.dart`](../lib/core/locale/locale_cubit.dart) |
| Bootstrap Bagisto locales on app start | [`lib/core/channel/channel_bootstrap_service.dart`](../lib/core/channel/channel_bootstrap_service.dart) |
| Send selected locale in GraphQL headers | [`lib/core/graphql/graphql_client.dart`](../lib/core/graphql/graphql_client.dart) |
| Language selector UI | [`lib/features/account/presentation/pages/preferences_bottom_sheet.dart`](../lib/features/account/presentation/pages/preferences_bottom_sheet.dart) |

### How It Works

1. On app startup, [`ChannelBootstrapService`](../lib/core/channel/channel_bootstrap_service.dart) fetches channel locales and the default locale from Bagisto.
2. The selected locale code is stored in shared preferences using [`LocaleCubit`](../lib/core/locale/locale_cubit.dart).
3. [`MaterialApp`](../lib/main.dart) uses that locale together with `AppLocalizations.delegate` and `AppLocalizations.supportedLocales`.
4. When the user changes language from the account/settings UI, the app updates the locale, clears GraphQL cache, and reloads key screens.
5. Every GraphQL request includes the selected locale in the `X-LOCALE` header so Bagisto can return translated content.

### Important Note

The current implementation is built around simple language codes such as `en`, `fr`, and `ar`. If you want region-specific locale codes such as `pt_BR` or `en_GB`, you will need code changes in locale storage and comparison logic.

### Add a New Language

For the complete step-by-step guide to add a new language to the app, see [LanguageConfiguration.md](./LanguageConfiguration.md).

---

## GraphQL Configuration

The app uses GraphQL for API communication. The configuration is handled in:

**File:** [`lib/core/graphql/graphql_client.dart`](../lib/core/graphql/graphql_client.dart)

### Key Features:

| Feature | Configuration |
|---------|---------------|
| HTTP Timeout | 60 seconds (connect & receive) |
| Authentication | Bearer token for authenticated requests |
| Dynamic Headers | `X-STOREFRONT-KEY`, `X-LOCALE`, `X-CURRENCY` |
| Cache | HiveStore with fallback to InMemoryStore |
| Logging | Request/response logging enabled |
| Fetch Policy | networkOnly (bypasses cache for queries) |

### Client Types:

1. **Standard Client** ([`GraphQLClientProvider.client`](../lib/core/graphql/graphql_client.dart)) - For guest users
2. **Authenticated Client** ([`GraphQLClientProvider.authenticatedClient`](../lib/core/graphql/graphql_client.dart)) - For logged-in users with Bearer token

---

## Summary of Configuration Files

| Configuration | File Path |
|--------------|-----------|
| **API Endpoint** | [`lib/core/constants/api_constants.dart`](../lib/core/constants/api_constants.dart) |
| **Theme/Colors** | [`lib/core/theme/app_theme.dart`](../lib/core/theme/app_theme.dart) |
| **Android App Name** | [`android/app/src/main/AndroidManifest.xml`](../android/app/src/main/AndroidManifest.xml) |
| **iOS App Name** | [`ios/Runner/Info.plist`](../ios/Runner/Info.plist) |
| **Android Icons** | [`android/app/src/main/res/mipmap-xxxhdpi/`](../android/app/src/main/res/mipmap-xxxhdpi/) |
| **iOS Icons** | [`ios/Runner/Assets.xcassets/AppIcon.appiconset/`](../ios/Runner/Assets.xcassets/AppIcon.appiconset/) |
| **Android Splash** | [`android/app/src/main/res/drawable-v21/launch_background.xml`](../android/app/src/main/res/drawable-v21/launch_background.xml) |
| **iOS Splash** | [`ios/Runner/Assets.xcassets/LaunchImage.imageset/`](../ios/Runner/Assets.xcassets/LaunchImage.imageset/) |
| **Android Firebase** | [`android/app/google-services.json`](../android/app/google-services.json) |
| **iOS Firebase** | [`ios/Runner/GoogleService-Info.plist`](../ios/Runner/GoogleService-Info.plist) |
| **Localization ARB Files** | [`lib/l10n/`](../lib/l10n/) |
| **Localization Generator Config** | [`l10n.yaml`](../l10n.yaml) |
| **Locale State Management** | [`lib/core/locale/locale_cubit.dart`](../lib/core/locale/locale_cubit.dart) |
| **Locale Bootstrap from Bagisto** | [`lib/core/channel/channel_bootstrap_service.dart`](../lib/core/channel/channel_bootstrap_service.dart) |
| **GraphQL Client** | [`lib/core/graphql/graphql_client.dart`](../lib/core/graphql/graphql_client.dart) |
| **Android Permissions** | [`android/app/src/main/AndroidManifest.xml`](../android/app/src/main/AndroidManifest.xml) |
| **iOS Permissions** | [`ios/Runner/Info.plist`](../ios/Runner/Info.plist) |
| **Dependencies** | [`pubspec.yaml`](../pubspec.yaml) |

---

## Additional Resources

- [ColorSetUp.md](./ColorSetUp.md) - Detailed color customization guide
- [LanguageConfiguration.md](./LanguageConfiguration.md) - Add or update app languages
- [ServerConfig.md](./ServerConfig.md) - Server-side configuration
- [InstallationGuide.md](./installationGuide.md) - App installation instructions
- [PlaceholderSetup.md](./PlaceholderSetup.md) - Placeholder image configuration

---

## File: Docs/installationGuide.md

# Installation Guide:——


**Scope :** This document aims to provide assistance to new developers so that they can configure the application from the Raw Source Code.

Basic Requirements :

 - Android Studio 4.1.1
 
 - Raw Source Code ( extracted from  Zip files)
 
 - Internet Connection( so that android studio can download the needed packages)
 
 - A Valid admin url of the Bagisto

# Procedure to Follow 

   **--------------------------------------- Android Studio Environment Set Up and Tests ---------------------------------------------------**

  - Firstly, you need to check if the Android Studio is properly installed and is in working state on your system.
    
     For checking you can create a sample new (Hello World) project and try running it on your device/emulator.
    
     If you find some problems here,then try searching on developer.android.com or stackoverflow.

  - Secondly,you need to check that flutter is working in your system.
    
     For checking you can create sample new (Hello world)project in dart language and print it in console.
    
     If you find any issue you can refer the following links for solution.
    
   Link:—
   - Flutter Related Information [ https://pub.dev/ ] 
   - Android Studio & Environment[ https://developer.android.com/ ]




   **---------------------------------------------- Configuration Steps -------------------------------------------------------------------**

   - Download the code from git lab.you will get a Zip file of code in your downloads folder.UnZip the file.
    
   - After this open the project in the android studio by choosing the Open an existing project option.Choose the Project by name and
        project will open in the android studio
        
   - open the emulator or connect android studio with your real device and follow the steps to run the application.
   
   - Now,your project is imported in the android Studio,You need to run few commands
   
   - Run **flutter clean**.after this command you will get errors in your all dart files.Now run **flutter pub get** ,when you get 0 as exit code
         then all the errors of all dart files will vanish.
         
   - Run the **flutter run** command and again you will face some errors,To  remove the errors you need to generate autogenerated files of Retrofit.
   
          Run the following retrofit commands to remove the error.
          
         Command:—>flutter pub run build_runner build
          
   - If command is not succeeded and you are still facing the issues,then run the another command of Retrofit.
   
         Command:—>flutter packages pub run build_runner build —delete-conflicting-outputs
         
   - Now,you will found that all the issues are vanished away and now run the **flutter run** command
   
   - When you can see the app is successfully installed in your device.
   
   - you can set up the server url and other credentials as per the information  in the “ServerConfiguration.dart" file.
    
    
    
  **-------------------------------------------to run the application for IOS platform-----------------------------------------------------**
    
  if you are running the application for ios then you must have mac system.
     also you need to follow the given steps to run the application for IOs:--
    
   - open terminal and run cd (ios folder path).
   - Now run pod install command.
   - Open the app in Xcode.
   - Open .xcworkspace file.
   - And run your project.

  **------------------------------------------------- Configuration Completed ------------------------------------------------------------**

  **------------------------------------------------- END OF DOCUMENT -------------------------------------------------------------------**

---

## File: Docs/PlaceholderSetup.md

# Placeholder & Image Setup

This guide explains how to set up splash screens, logos, icons, and placeholders in the Bagisto Flutter app.

---

## Asset Directory Structure

The app's assets are stored in the `assets/` folder:

```
assets/
├── images/
│   ├── splash.png          # Splash screen image
│   ├── bagisto_logo.svg    # Bagisto logo (SVG)
│   ├── apple_icon.svg      # Apple sign-in icon
│   ├── facebook_icon.svg   # Facebook sign-in icon
│   └── google_icon.svg     # Google sign-in icon
└── ml/
    └── (ML model files)
```

---

## Splash Screen

### Image Location

**File:** `assets/images/splash.png`

The splash screen is configured in:
**File:** `lib/features/splash/presentation/splash_screen.dart`

```dart
SplashScreen(
  backgroundColor: Colors.white,
  child: Image.asset(
    'assets/images/splash.png',
    width: double.infinity,
    height: double.infinity,
    fit: BoxFit.cover,
  ),
)
```

### To Customize Splash Screen

1. Replace `assets/images/splash.png` with your custom image
2. Recommended size: 1920x1080 pixels (or higher for high-DPI displays)
3. The splash displays for 3 seconds before navigating to the home screen

### Android Splash Configuration

**File:** `android/app/src/main/res/drawable/launch_background.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
</layer-list>
```

### iOS Splash Configuration

**File:** `ios/Runner/Base.lproj/LaunchScreen.storyboard`

Modify the storyboard to customize the iOS launch screen.

---

## App Icons (Launcher Icons)

### Android

**Location:** `android/app/src/main/res/`

The Android adaptive icons are stored in various `mipmap` directories:
- `mipmap-mdpi/`
- `mipmap-hdpi/`
- `mipmap-xhdpi/`
- `mipmap-xxhdpi/`
- `mipmap-xxxhdpi/`

**To change the app icon:**
1. Use Android Studio's Image Asset tool:
   - Right-click on `app` → New → Image Asset
   - Select "Launcher Icons" as the icon type
   - Choose your custom icon image

### iOS

**File:** `ios/Runner/Assets.xcassets/AppIcon.appiconset/`

**To change the app icon:**
1. Replace the existing icon images in this folder with your custom icons
2. Ensure you provide all required sizes (20, 29, 40, 60, 76, 83.5 points @1x, @2x, @3x)

---

## Logo & Social Login Icons

The app includes SVG logos for branding and social login:

| Icon | File Path |
|------|-----------|
| Bagisto Logo | `assets/images/bagisto_logo.svg` |
| Apple Icon | `assets/images/apple_icon.svg` |
| Facebook Icon | `assets/images/facebook_icon.svg` |
| Google Icon | `assets/images/google_icon.svg` |

### To Customize Logos

1. Add your custom SVG or PNG files to `assets/images/`
2. Update the `pubspec.yaml` to include the new assets:

```yaml
flutter:
  assets:
    - assets/images/
    - assets/ml/
```

3. Reference the image in your code:

```dart
Image.asset('assets/images/your-logo.png')
// or for SVG
SvgPicture.asset('assets/images/your-logo.svg')
```

---

## Image Placeholders

This app uses **code-based placeholders** rather than placeholder images. When images are loading, the app displays colored containers as placeholders.

### Placeholder Colors

Placeholders use theme-aware colors defined in `lib/core/theme/app_theme.dart`:

```dart
// Light mode placeholder
AppColors.neutral100  // Light gray background

// Dark mode placeholder
AppColors.neutral800  // Dark gray background
```

### How Placeholders Work

The app uses the `cached_network_image` package which provides a `placeholder` callback:

```dart
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => Container(
    color: isDark ? AppColors.neutral800 : AppColors.neutral100,
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
)
```

### Widgets with Placeholders

The following widgets implement placeholder support:
- Product cards (`product_card_large.dart`, `product_card_small.dart`)
- Category banners (`category_banner.dart`)
- Category images (`category_chip_row.dart`, `sub_category_section.dart`)
- Product images (`product_image_carousel.dart`, `product_related_section.dart`)
- Cart items (`cart_page.dart`)
- Home page widgets (`static_content_widget.dart`, `category_carousel.dart`)

---

## Adding Custom Placeholder Images

If you want to use custom placeholder images instead of code-based placeholders:

1. Add placeholder images to `assets/images/`:
   ```
   assets/images/placeholder.png
   ```

2. Use them in your widgets:

```dart
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => Image.asset(
    'assets/images/placeholder.png',
    fit: BoxFit.cover,
  ),
)
```

---

## Summary

| Asset Type | Location |
|------------|----------|
| Splash Screen | `assets/images/splash.png` |
| App Logo | `assets/images/bagisto_logo.svg` |
| Social Icons | `assets/images/{apple,facebook,google}_icon.svg` |
| Android Icons | `android/app/src/main/res/mipmap-*/` |
| iOS Icons | `ios/Runner/Assets.xcassets/AppIcon.appiconset/` |
| Placeholders | Code-based (Container widgets) |

---

## File: Docs/ServerConfig.md

# Server Configuration for Bagisto Flutter App

## Overview

The Bagisto Flutter app uses **GraphQL** for API communication. Server configuration is managed through constants and environment variables.

## Configuration Steps

### 1. Update API Constants

Go to `lib/core/constants/api_constants.dart` and configure the following:

```dart
/// Bagisto GraphQL endpoint (e.g., https://your-bagisto-server.com/graphql)
const String bagistoEndpoint = 'YOUR_BAGISTO_ENDPOINT_HERE';

/// Storefront key for Bagisto API
/// Get this from your Bagisto admin panel
const String storefrontKey = 'YOUR_STOREFRONT_KEY_HERE';

/// Company name (optional metadata)
const String companyName = 'Your Company Name';
```

## Configuration Details

### `bagistoEndpoint`
- **Type:** String (URL)
- **Example:** `https://bagisto.yourdomain.com/graphql`
- **Purpose:** GraphQL endpoint URL for all API calls
- **Required:** Yes

### `storefrontKey`
- **Type:** String  
- **Purpose:** API key for identifying your storefront in Bagisto
- **Location in Bagisto:** Admin Panel → Settings → Channels
- **Required:** Yes

## GraphQL Client Configuration

The GraphQL client is configured in `lib/core/graphql/graphql_client.dart` with:

- **HTTP Client:** Custom `TimeoutHttpClient` with 30-second timeout for both connection and receive
- **Headers:** 
  - `Content-Type: application/json`
  - `X-STOREFRONT-KEY: {storefrontKey}`
- **Logging:** Detailed request/response logging in debug mode
- **Caching:** HiveStore for offline data persistence

## Network Configuration

### Timeouts
- **Connection Timeout:** 30 seconds
- **Receive Timeout:** 30 seconds

### Cache Management
The app uses HiveStore for caching GraphQL responses. To clear cache on logout:
```dart
await GraphQLClientProvider.clearCache();
```

## Testing Configuration

Before deploying to production:
1. Verify your Bagisto endpoint is accessible
2. Confirm the storefront key is valid in Bagisto admin
3. Test API connectivity from your development environment
4. Check network logs in Flutter DevTools for request/response details

---

## File: ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md

# Launch Screen Assets

You can customize the launch screen with your own desired assets by replacing the image files in this directory.

You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images.