WooClot - Complete Flutter E-Commerce App

WooClot is a production-ready Flutter e-commerce application with full WooCommerce integration. Built with clean architecture and modern design patterns, it offers a complete shopping experience with 12+ payment gateways, AI shopping assistant, push notifications, and dynamic theming.

The app seamlessly connects to any WooCommerce-powered WordPress website, allowing you to manage products, orders, and customers from your existing WooCommerce admin panel while providing your customers with a beautiful native mobile shopping experience.

Features

E-Commerce Core Features

Payment Gateways (12 Total)

All payment gateways are configured through the included WooClot WordPress plugin.

Advanced Features

Technical Excellence

Architecture & Development Practices

Core Technologies

Flutter Packages

Icons & UI Essentials

cupertino_icons: ^1.0.8 >> iOS-style icons

flutter_svg: ^2.2.3 >> SVG rendering

font_awesome_flutter: ^10.12.0 >> Font Awesome icons

UI / Layout / Animations

carousel_slider: ^5.1.1 >> Image/content carousels

flutter_staggered_grid_view: ^0.7.0 >> Masonry / staggered grids

shimmer: ^3.0.0 >> Shimmer loading placeholders

lottie: ^3.3.2 >> Lottie animations

Forms / Inputs / Sharing

pinput: ^6.0.1 >> PIN/OTP input fields

share_plus: ^12.0.1 >> Share text/links/files

speech_to_text: ^7.3.0 >> Voice input and speech recognition

Networking & Data

dio: ^5.9.0 >> HTTP client

html: ^0.15.6 >> HTML parsing

logger: ^2.6.2 >> Logging utility

State Management

provider: ^6.1.5+1 >> State management

equatable: ^2.0.7 >> Value equality for Dart objects

Local Storage & Utilities

shared_preferences: ^2.5.4 >> Simple key-value storage

path_provider: ^2.1.5 >> Access to commonly used file system locations

intl: ^0.20.2 >> Internationalization & formatting

device_info_plus: ^12.3.0 >> Get device information

Media & File Handling

image_picker: ^1.2.1 >> Pick images from gallery/camera

cached_network_image: ^3.4.1 >> Cached network images

flutter_cache_manager: ^3.4.1 >> Cache manager for downloaded files

open_filex: ^4.7.0 >> Open files with default system apps

WebView

webview_flutter: ^4.13.0 >> WebView for mobile apps

Links & URL Launching

url_launcher: ^6.3.2 >> Open URLs, dialer, mail, etc.

Payments / Gateways

flutter_stripe: ^12.1.1 >> Stripe payments

razorpay_flutter: ^1.4.0 >> Razorpay payments

Notifications & Push

firebase_core: ^4.3.0 >> Required core for Firebase

firebase_messaging: ^16.1.0 >> FCM push notifications

flutter_local_notifications: ^19.5.0 >> Local notifications

onesignal_flutter: ^5.3.4 >> OneSignal push notifications

Folder Structure

The app follows a clean architecture with feature-based organization. All app logic and UI code is in the lib/ folder.

lib/
├── app/                          # App initialization & configuration
│   ├── app/                      # Main app widget
│   ├── app_colors_provider/      # Dynamic color management
│   ├── app_config/               # App configuration
│   ├── app_theme/                # Theme configuration
│   ├── assets_path/              # Assets path constants
│   ├── routes/                   # Navigation routes
│   └── urls/                     # API URLs
├── common/                       # Shared resources
│   ├── utils/                    # Helper functions
│   ├── widgets/                  # Reusable UI components
│   └── services/                 # Common services
├── features/                     # Feature modules
│   ├── auth/                     # Authentication
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       ├── screens/
│   │       └── widgets/
│   ├── products/                 # Product catalog
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       ├── screens/
│   │       └── widgets/
│   ├── cart/                     # Shopping cart
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       ├── screens/
│   │       └── widgets/
│   ├── wishlist/                 # Wishlist/Favorites
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── screens/
│   ├── order/                    # Orders & checkout
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       ├── screens/
│   │       └── widgets/
│   ├── payments/                 # Payment processing
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── widgets/
│   ├── profile/                  # User profile
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── screens/
│   ├── categories/               # Product categories
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── screens/
│   ├── home/                     # Home screen (Advanced layout)
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       ├── screens/
│   │       └── widgets/
│   ├── home_basic/               # Home screen (Basic layout)
│   ├── home_simple/              # Home screen (Simple layout)
│   ├── address/                  # Shipping addresses
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── widgets/
│   ├── notifications/            # Push notifications
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── screens/
│   ├── ai_chat/                  # AI Shopping Assistant
│   │   ├── data/
│   │   │   └── models/
│   │   ├── providers/
│   │   └── ui/
│   │       └── screens/
│   └── chat/                     # Support chat
│       ├── data/
│       │   └── models/
│       ├── providers/
│       └── ui/
│           └── screens/
├── network/                      # API layer
│   ├── dio_client/               # HTTP client setup
│   ├── api_exception/            # Error handling
│   ├── api_urls/                 # API endpoints
│   ├── auth_network/             # Auth API calls
│   ├── products_network/         # Products API
│   ├── cart_network/             # Cart API
│   ├── order_network/            # Orders API
│   ├── payment_gateways_network/ # Payment gateway network
│   └── pgw/                      # Payment gateway services
│       ├── stripe_service/       # Stripe integration
│       ├── razorpay_service/     # Razorpay integration
│       ├── paypal_service/       # PayPal integration
│       ├── mercadopago_service/  # MercadoPago integration
│       ├── myfatoorah_service/   # MyFatoorah integration
│       ├── phonepe_service/      # PhonePe integration
│       ├── flutterwave_service/  # Flutterwave integration
│       ├── paystack_service/     # Paystack integration
│       ├── midtrans_service/     # Midtrans integration
│       ├── mollie_service/       # Mollie integration
│       └── xendit_service/       # Xendit integration
└── main/                         # App entry point

Architecture Pattern

Each feature module follows this structure:

• data/ - Models and data classes
• providers/ - State management (Provider)
• ui/screens/ - Screen widgets
• ui/widgets/ - Feature-specific widgets

This clean separation makes the codebase easy to understand, maintain, and extend.

App Screens

WooClot includes all essential screens for a complete e-commerce experience.

Authentication

• Splash Screen - App loading and initialization
• Onboarding Screens - First-time user introduction
• Login Screen - User authentication
• Register Screen - New user registration
• Forgot Password - Password recovery

Home & Navigation

• Home Screen - Main dashboard (3 layout variants: Basic, Simple, Advanced)
• Bottom Navigation - Home, Categories, Cart, Profile tabs
• Search Screen - Product search with filters

Products

• Categories Screen - Browse product categories
• Products List Screen - Product grid/list view with filters
• Product Details Screen - Detailed product information with image gallery
• Product Variations Screen - Select size, color, etc.

Shopping

• Cart Screen - Shopping cart with quantity management
• Wishlist Screen - Saved/favorite products
• Checkout Screen - Order review and payment
• Payment Method Screen - Select payment gateway
• Order Success Screen - Order confirmation

Orders

• Orders Screen - Order history list
• Order Details Screen - Detailed order information
• Order Tracking Screen - Track order status

User Profile

• Profile Screen - User account dashboard
• Edit Profile Screen - Update personal information
• Addresses Screen - Manage shipping addresses
• Add/Edit Address Screen - Address form
• Change Password Screen - Update password

Additional Features

• Notifications Screen - Push notification history
• AI Chat Screen - AI Shopping Assistant
• Support Chat Screen - Customer support
• Settings Screen - App preferences
• About Screen - App information

Requirements

Download and install Any one from these IDE(Android studio, Vs Code) on your computer.

• Source Android Studio: https://developer.android.com/studio
• Source Android Studio: https://code.visualstudio.com/download

Setup Flutter and Dart SDK in your computer if you want to modify the source code

• Source Android Studio: https://docs.flutter.dev/get-started/install

Must installed Flutter and dart plugin on your IDE

WooCommerce Setup & Plugin Configuration

WooClot requires a complete WordPress + WooCommerce setup along with 3 custom plugins that extend functionality for the mobile app. Follow these steps carefully to ensure everything works correctly.

Step 1: WordPress & WooCommerce Installation

Before using WooClot, you need a WordPress site with WooCommerce installed:

1. Install WordPress on your hosting (Recommended: PHP 7.4+, MySQL 5.7+)
2. Install and activate the WooCommerce plugin from WordPress.org
3. Complete the WooCommerce setup wizard (store location, currency, payment methods, shipping zones)
4. Add your products with proper titles, descriptions, images, prices, and stock
5. Create product categories and tags for better organization
6. Configure tax settings and shipping methods as per your business needs

Step 2: Generate WooCommerce API Keys

WooClot mobile app uses WooCommerce REST API to communicate with your store. You need to generate API credentials:

1. Go to WooCommerce → Settings → Advanced → REST API
2. Click Add Key button
3. Set Description: WooClot Mobile App
4. Set User: Select your admin user account
5. Set Permissions: Read/Write (Required for full functionality)
6. Click Generate API Key
7. Copy your Consumer Key (starts with ck_) and Consumer Secret (starts with cs_)
8. Save these credentials securely - you'll need them in the Flutter app configuration

Step 3: Configure SSL Certificate (HTTPS)

WooCommerce REST API requires HTTPS for secure communication. This is mandatory:

1. Ensure your WordPress site has a valid SSL certificate installed
2. Your site URL should start with https:// not http://
3. Most hosting providers offer free SSL through Let's Encrypt (Auto SSL)
4. Go to Settings → General and ensure both WordPress Address and Site Address use HTTPS
5. Test your SSL: Visit SSL Labs to verify certificate

Step 4: Install Required WordPress Plugins

WooClot requires 3 custom WordPress plugins included in your download package. Each plugin adds essential functionality for the mobile app:

Step 5: Install All Three Plugins

Install each plugin one by one following these steps:

A. Install WooClot Plugin (Main)

1. Go to WordPress Admin → Plugins → Add New
2. Click Upload Plugin button at the top
3. Choose wooclot.zip from your download package
4. Click Install Now and wait for installation to complete
5. Click Activate Plugin
6. You'll see a new WooClot menu in the admin sidebar

B. Install Clot Chat Plugin

1. Go to Plugins → Add New → Upload Plugin
2. Choose clot-chat.zip
3. Click Install Now then Activate
4. Plugin will automatically create required database tables
5. Access from Clot Chat menu in admin sidebar

C. Install Clot Notifications Plugin

1. Go to Plugins → Add New → Upload Plugin
2. Choose clot-notifications.zip
3. Click Install Now then Activate
4. Plugin creates FCM token storage table automatically
5. Access from Clot Notifications menu in admin sidebar

Step 6: Configure WooClot Plugin

After installing WooClot, configure its modules:

App Controls Configuration

1. Go to WooClot → App Controls in WordPress admin
2. App Theme: Set primary and secondary colors for your app (HEX color codes)
3. Home Layout: Choose from Basic, Simple, or Advanced layout for home screen
4. Banners: Upload promotional banners for the home screen with links
5. JWT Secret: Generate a secure JWT secret key for authentication (save it for app config)
6. Click Save Settings

AI Shopping Assistant Configuration

1. Go to WooClot → AI Assistant
2. Get your Google Gemini API key from Google AI Studio
3. Enter the Gemini API key in the settings
4. Configure AI assistant behavior and responses
5. Enable/disable the AI chat feature
6. Save settings

Payment Gateway Configuration

1. Go to WooClot → Payment Gateways
2. Enable the payment gateways you want to use
3. For each gateway, enter the required API credentials:
   • Stripe: Publishable Key, Secret Key
   • Razorpay: Key ID, Key Secret
   • PayPal: Client ID, Client Secret
   • MercadoPago: Public Key, Access Token
   • And so on for other gateways...
4. Enable Test/Sandbox mode for testing
5. Save each gateway configuration

Step 7: Configure Clot Chat

1. Go to Clot Chat → Settings
2. Configure chat settings (enable/disable, message limits, etc.)
3. Add admin users who can respond to customer messages
4. Test the chat system from the admin panel
5. Go to Clot Chat → Conversations to view and manage all user chats

Step 8: Configure Clot Notifications (Firebase)

Get Firebase Service Account JSON

1. Go to Firebase Console
2. Select your project (or create new one)
3. Click on Project Settings (⚙️ gear icon)
4. Navigate to Service Accounts tab
5. Click Generate New Private Key
6. Confirm and download the JSON file
7. Keep this file secure - it contains sensitive credentials

Upload JSON to WordPress

1. Go to Clot Notifications → Settings in WordPress admin
2. Click Upload Firebase JSON button
3. Select the downloaded service account JSON file
4. Plugin will validate and store the credentials securely
5. Enable notification types:
   • ✅ Order Placed Notifications
   • ✅ Order Status Update Notifications
6. Customize notification messages (title, body text)
7. Save settings

Test Push Notifications

1. Install the mobile app on a test device
2. Login to the app with a test user account
3. The app will automatically register FCM token
4. Go to Clot Notifications → FCM Tokens to see registered devices
5. Place a test order from the app
6. You should receive a push notification instantly
7. Change order status from WooCommerce admin to test status notifications

Step 9: Verify Plugin Installation

After installing all three plugins, verify everything is working:

App Configuration

After setting up WordPress plugins, configure the Flutter app to connect with your WooCommerce store. There are 2 main configuration files you need to update.

File 1: WooCommerce API Credentials

Location: lib/app/app_config.dart

This file contains your WooCommerce REST API authentication credentials (Consumer Key and Consumer Secret) that you generated earlier.

Configuration Steps:

1. Open the file lib/app/app_config.dart in your IDE
2. Replace the defaultValue in wooConsumerKey with your actual Consumer Key
3. Replace the defaultValue in wooConsumerSecret with your actual Consumer Secret
4. Save the file

class AppConfig {
  /// WooCommerce REST API Consumer Key
  /// Get this from: WooCommerce > Settings > Advanced > REST API
  /// Format: 'ck_' followed by 40 characters
  static const String wooConsumerKey = String.fromEnvironment(
    'WOO_KEY',
    defaultValue: 'ck_YOUR_CONSUMER_KEY_HERE',  // ⬅️ Replace this
  );
  
  /// WooCommerce REST API Consumer Secret
  /// Get this from: WooCommerce > Settings > Advanced > REST API
  /// Format: 'cs_' followed by 40 characters
  static const String wooConsumerSecret = String.fromEnvironment(
    'WOO_SECRET',
    defaultValue: 'cs_YOUR_CONSUMER_SECRET_HERE',  // ⬅️ Replace this
  );
}

File 2: Store URL Configuration

Location: lib/app/urls.dart

This file contains your WordPress store URL. You only need to change ONE line - the base URL. All API endpoints are automatically configured based on this URL.

Configuration Steps:

1. Open the file lib/app/urls.dart in your IDE
2. Find the base constant (around line 10)
3. Replace 'https://wooclot.site' with your WordPress store URL
4. Make sure to use https:// (not http://)
5. Do not include trailing slash (/) at the end
6. Save the file - that's it! 🎉

class ApiUrls {
  ApiUrls._();

  /// Base URL of your WordPress/WooCommerce store
  /// ⬇️ ONLY CHANGE THIS LINE ⬇️
  static const String base = 'https://yourstore.com';  // ⬅️ Change this to your URL
  
  // ✅ All other API endpoints are automatically configured
  // ✅ No need to modify anything else in this file
}

Verify Configuration

After updating both files, verify your configuration is correct:

1. Check URLs: Visit your store URL in a browser - should load your WordPress site
2. Test REST API: Visit https://yourstore.com/wp-json - should show JSON response
3. Verify SSL: Check that your URL uses HTTPS and has a valid certificate
4. Test WooCommerce API: Visit https://yourstore.com/wp-json/wc/v3 - should show WooCommerce API info
5. Run the app: Execute flutter run and try logging in
6. Check logs: If errors occur, check console logs for API connection issues

Additional Configuration (Optional)

App Name & Package

1. Update App Name in pubspec.yaml

name: wooclot  # Change to your app name (lowercase, no spaces)
description: Your WooCommerce Flutter App

2. Update Package Name (Android)

Edit android/app/build.gradle:

android {
    defaultConfig {
        applicationId "com.yourcompany.yourapp"  // Change this
    }
}

3. Update Bundle ID (iOS)

Open ios/Runner.xcodeproj in Xcode and update Bundle Identifier in Project Settings to match your app.

App Colors & Theme

WooClot supports dynamic theming from WordPress backend, but you can also set default colors in code:

Open lib/app/app_theme/app_colors.dart:

class AppColors {
  static const Color primary = Color(0xFFFE3C00);     // Your brand color
  static const Color secondary = Color(0xFF2C3E50);   // Secondary color
  static const Color accent = Color(0xFF00C853);      // Accent color
  // ... other colors
}

Note: Theme colors can be changed dynamically from WooClot → App Controls in WordPress admin without rebuilding the app.

Payment Gateway Configuration

WooClot supports 12 payment gateways. Configure them through the WooClot WordPress plugin.

WordPress Plugin Configuration

In WordPress Admin, go to WooClot → Payment Gateways:

1. Select the payment gateway you want to enable
2. Toggle the status to Active
3. Enable Test Mode for testing (if supported)
4. Enter your API credentials from the payment provider
5. Save the configuration

Supported Payment Gateways

1. Stripe

• Get API keys from Stripe Dashboard
• Required: Publishable Key and Secret Key
• Supports Test Mode with test API keys
• Accepts: Credit/Debit Cards, Apple Pay, Google Pay

2. Razorpay

• Get keys from Razorpay Dashboard
• Required: Key ID and Key Secret
• Popular in India, supports UPI, Net Banking, Cards

3. PayPal

• Get credentials from PayPal Developer
• Required: Client ID and Client Secret
• Sandbox mode available for testing

4. MercadoPago

• Popular in Latin America
• Required: Public Key and Access Token

5. MyFatoorah

• Popular in Middle East
• Required: API Key
• Supports multiple currencies (KWD, SAR, AED, etc.)

6. PhonePe

• Indian UPI payment gateway
• Required: Merchant ID and Salt Key

7. Flutterwave

• Popular in Africa
• Required: Public Key and Secret Key
• Supports Mobile Money, Cards, Bank Transfer

8. Paystack

• Nigerian payment gateway
• Required: Public Key and Secret Key

9. Midtrans

• Indonesian payment gateway
• Required: Client Key and Server Key

10. Mollie

• European payment gateway
• Required: API Key
• Supports iDEAL, Bancontact, and more

11. Xendit

• Southeast Asian payment gateway
• Required: Public Key and Secret Key

12. Offline Payment (Cash on Delivery)

• No API keys required
• Users pay upon delivery
• Orders marked as "Pending Payment"

Firebase & Push Notifications Setup

WooClot uses Firebase Cloud Messaging (FCM) and OneSignal for push notifications.

Firebase Setup

Step 1: Create Firebase Project

1. Go to Firebase Console
2. Click Add Project
3. Enter project name and click Continue
4. Disable Google Analytics (optional) and click Create Project

Step 2: Add Android App

1. Click the Android icon to add Android app
2. Enter your Android package name (e.g., com.yourcompany.wooclot)
3. Download google-services.json
4. Copy google-services.json to android/app/ folder

Step 3: Add iOS App

1. Click the iOS icon to add iOS app
2. Enter your iOS Bundle ID (same as Xcode project)
3. Download GoogleService-Info.plist
4. Open ios/Runner.xcworkspace in Xcode
5. Drag GoogleService-Info.plist into Runner folder

Step 4: Enable Cloud Messaging

1. In Firebase Console, go to Project Settings → Cloud Messaging
2. Copy your Server Key for use in WordPress plugin

OneSignal Setup

Step 1: Create OneSignal Account

1. Go to OneSignal
2. Sign up for a free account
3. Click New App/Website
4. Select Mobile App platform

Step 2: Configure Android

1. Select Google Android (FCM)
2. Enter your Firebase Server Key and Sender ID
3. Click Save & Continue

Step 3: Configure iOS (Apple)

1. Select Apple iOS
2. Upload your iOS Push Certificate (.p12 file)
3. Enter your certificate password

Step 4: Get OneSignal App ID

1. Go to Settings → Keys & IDs
2. Copy your OneSignal App ID
3. Update in lib/main.dart:

class AppConfig {
  static const String oneSignalAppId = 'YOUR_ONESIGNAL_APP_ID_HERE';
}

App Customization

Customize WooClot to match your brand identity. You can change the app logo, placeholder images, splash screen, app name, and fallback theme colors.

1. App Logo & Placeholder Images

WooClot uses two main image assets that define your app's visual identity:

A. Replace App Logo (Fallback)

Location: assets/core/logo.svg

Type: API-Driven with Local Fallback

Steps to Replace Fallback Logo:

1. Prepare your logo in SVG format for best quality (recommended)
2. Replace the file assets/core/logo.svg with your logo
3. Keep the filename as logo.svg - the app references this exact name
4. Recommended size: 200x60 pixels or similar aspect ratio
5. Ensure the SVG is optimized for mobile (remove unnecessary elements)
6. This fallback ensures logo displays even if API fails

B. Replace Placeholder Image (Local Only)

Location: assets/core/placeholder.png

Type: Local Asset (No API)

Steps to Replace Placeholder:

1. Create a placeholder image in PNG format (supports transparency)
2. Replace the file assets/core/placeholder.png with your image
3. Keep the filename as placeholder.png
4. Recommended size: 500x500 pixels (square format)
5. Use a neutral design that works with any product type
6. Rebuild the app to apply changes

2. App Icon & Splash Screen

Configure app launcher icon and splash screen using Flutter packages.

A. App Launcher Icon

The icon that appears on device home screen and app drawer.

1. Create an app icon image (1024x1024px PNG, with transparent background)
2. Place it in assets/launcher/icon.png
3. For Android adaptive icon, also place background: assets/launcher/bg.png
4. Open pubspec.yaml and verify flutter_launcher_icons configuration:

   flutter_launcher_icons:
     android: true
     ios: true
     image_path: "assets/launcher/icon.png"
     adaptive_icon_background: "assets/launcher/bg.png"
     adaptive_icon_foreground: "assets/launcher/icon.png"

5. Run command: flutter pub get
6. Run command: flutter pub run flutter_launcher_icons
7. This will generate all required icon sizes for Android and iOS

B. Splash Screen

The screen shown while app is loading. WooClot has a beautiful built-in splash screen that you can customize.

Splash Screen Features:

• Automatically displays your logo from assets/core/logo.svg
• Dynamic background using primary brand color from WordPress
• Animated logo entrance with pulsing glow effect
• Bottom "Powered by" tagline (customizable)
• Displays for approximately 1.8 seconds while app initializes

Change "Powered by" Text:

Location: lib/features/auth/ui/screens/splash_screen.dart

1. Open the file lib/features/auth/ui/screens/splash_screen.dart
2. Scroll to around line 250 (bottom of the file)
3. Find the Text widget with 'Powered by WooClot'
4. Change it to your desired text, for example:
   • 'Powered by YourCompany'
   • 'Made with ❤️ by YourBrand'
   • Or remove it completely by deleting the entire Align widget section
5. Save the file and rebuild the app

// Around line 218 - Bottom "Powered by" section
Align(
  alignment: Alignment.bottomCenter,
  child: SafeArea(
    top: false,
    child: Padding(
      padding: const EdgeInsets.only(bottom: 24),
      child: FadeTransition(
        opacity: CurvedAnimation(
          parent: _controller,
          curve: const Interval(0.35, 1.0, curve: Curves.easeOut),
        ),
        child: SlideTransition(
          position: Tween(
            begin: const Offset(0, 0.25),
            end: Offset.zero,
          ).animate(
            CurvedAnimation(
              parent: _controller,
              curve: const Interval(0.35, 1.0, curve: Curves.easeOutCubic),
            ),
          ),
          child: const Text(
            'Powered by WooClot',  // ⬅️ Change this text
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
              fontWeight: FontWeight.w600,
              letterSpacing: 0.3,
            ),
          ),
        ),
      ),
    ),
  ),
),

3. App Name

Change the app name displayed on device home screen and app stores.

For Android:

Edit android/app/src/main/AndroidManifest.xml:

<application
    android:label="Your App Name"
    ...>

For iOS:

Edit ios/Runner/Info.plist:

<key>CFBundleName</key>
<string>Your App Name</string>

4. Fallback Theme Colors

WooClot uses dynamic theming - colors are fetched from WordPress backend (WooClot → App Controls). However, you can set fallback colors that are used during initial app load or if API fails.

Location: lib/app/app_colors_provider.dart

class AppColorsProvider extends ChangeNotifier {
  // Fallback colors (used only during loading or API failure)
  Color get primaryColor => _remotePrimary ?? const Color(0xFFff6600);  // ⬅️ Change this
  
  Color get secondaryColor => _remoteSecondary ?? const Color(0xFF03DAC6);  // ⬅️ Change this
  
  // Colors are normally loaded from WordPress API
  // These fallbacks are rarely seen by users
}

5. Custom Fonts (Optional)

WooClot uses CircularStd font by default. To change fonts:

1. Add font files to assets/fonts/
2. Update pubspec.yaml:

   fonts:
     - family: YourFont
       fonts:
         - asset: assets/fonts/YourFont-Regular.ttf
         - asset: assets/fonts/YourFont-Bold.ttf
           weight: 700

3. Update lib/app/app_theme.dart - change fontFamily: 'CircularStd' to your font
4. Run flutter clean and rebuild

Summary: Files to Customize

Build & Run

Run in Debug Mode

Android:

flutter run

iOS:

flutter run

Or press F5 in VS Code / Android Studio

Build Release APK (Android)

Generate Keystore (first time only):

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Configure Signing:

Create android/key.properties:

storePassword=your-keystore-password
keyPassword=your-key-password
keyAlias=upload
storeFile=C:/path/to/upload-keystore.jks

Build APK:

flutter build apk --release --obfuscate --split-debug-info=build/app/outputs/symbols

Build App Bundle (recommended for Play Store):

flutter build appbundle --release --obfuscate --split-debug-info=build/app/outputs/symbols

Build iOS App

Prerequisites:

• Mac computer with Xcode installed
• Apple Developer account ($99/year)
• Valid provisioning profile and certificates

Build Steps:

1. Open ios/Runner.xcworkspace in Xcode
2. Select your team in Signing & Capabilities
3. Update Bundle Identifier if needed
4. Select Generic iOS Device or your connected device
5. Go to Product → Archive
6. Once archived, click Distribute App
7. Choose distribution method (App Store, Ad Hoc, Enterprise)

Or build from command line:

flutter build ios --release --obfuscate --split-debug-info=build/ios/outputs/symbols

Troubleshooting

Common Issues

1. "Unable to load asset" Error

Solution:

• Run flutter clean
• Run flutter pub get
• Restart the app

2. Firebase/OneSignal Not Working

Solution:

• Verify google-services.json is in android/app/
• Verify GoogleService-Info.plist is added to Xcode project
• Check OneSignal App ID is correct in app_config.dart
• Rebuild the app completely

3. Payment Gateway Not Showing

Solution:

• Ensure gateway is enabled in WordPress plugin
• Check API credentials are correct
• Verify internet connection
• Check app logs for API errors

4. API Connection Failed

Solution:

• Verify baseUrl in api_config.dart is correct
• Ensure your WordPress site has valid SSL (HTTPS)
• Check WooCommerce API keys are active
• Test API endpoints in Postman/browser

5. Build Failed on iOS

Solution:

• Run cd ios && pod install && cd ..
• Run flutter clean and rebuild
• Update CocoaPods: sudo gem install cocoapods
• Check Xcode is up to date

6. Products Not Loading

Solution:

• Ensure you have products published in WooCommerce
• Check product visibility is set to "Catalog & Search"
• Verify WooCommerce API permissions are Read/Write
• Clear app cache and restart

Support

If you need help with WooClot, we're here to assist you!

Before Requesting Support

• Check the documentation thoroughly
• Review the Troubleshooting section
• Verify your Flutter and Dart SDK versions
• Ensure all setup steps were completed correctly

How to Get Support

1. Email Support

• Email us at: support@clotcode.site
• Include detailed information about your issue
• Attach screenshots or error logs if applicable

2. Codester Support Tab

• Go to your Codester downloads
• Find WooClot and click on the Support tab
• Submit your question with detailed information

3. What to Include in Support Requests

• Detailed description of the issue
• Steps to reproduce the problem
• Screenshots or screen recordings
• Error messages or logs
• Flutter doctor output (flutter doctor -v)
• Your development environment (OS, IDE, versions)

Response Time

We typically respond within 24-48 hours on business days. Please be patient, especially during weekends and holidays.

Updates

WooClot receives regular updates with bug fixes and new features. Keep your app updated for the best experience!

Changelog

Version 1.0.0 (Initial Release)

Release Date: [Your Release Date]

• 🎉 Initial release of WooClot
• ✨ Complete WooCommerce integration
• 💳 12 payment gateways supported
• 🤖 AI Shopping Assistant with Google Gemini
• 🔔 Firebase & OneSignal push notifications
• 🎨 3 home screen layout variants
• 🛒 Full e-commerce features (Cart, Wishlist, Orders)
• 👤 User authentication and profile management
• 🌍 Address management for shipping
• 🎨 Dynamic theming support
• 📱 Responsive design for all screen sizes
• 🏗️ Clean architecture with feature-based modules