Subsify Documentation: This tab contains the Subsify customer app setup guide and the complete user guide.

Getting Started

    Introduction

    Thank you so much for purchasing our item from CodeCanyon.

    Subsify Customer App is a modern and user-friendly mobile application designed for customers to browse, purchase, and manage digital tool subscriptions with ease. Built with intuitive functionality and smart features, the app allows customers to explore available subscription products, place orders, track order history, receive real-time notifications, and manage their profile — all in one place. With a streamlined shopping experience and efficient subscription management tools, Subsify Customer App helps users discover the best digital tools at reseller prices, stay on top of their active subscriptions, and renew or upgrade plans effortlessly. Whether purchasing a single subscription or managing multiple digital tools, the app provides everything customers need to stay connected and in control of their digital subscriptions confidently and efficiently.

    Version: V1.0

    Author: BugBuild-Labs

    Microsoft Team: [email protected]

    WhatsApp: 01811843300

Requirements

  • Tested with Flutter SDK 3.41.6 on the stable channel
  • Dart SDK 3.11.4, bundled with Flutter 3.41.6
  • DevTools 2.54.2, included with the Flutter SDK
  • Project Dart SDK constraint: ^3.11.4
  • Minimum Flutter dependency support: >=3.41.6
  • Android Studio or VS Code with Flutter setup
  • Android device/emulator or iOS device/simulator for testing
  • Xcode, required only for iOS builds

Note: Dart SDK and DevTools are included with the Flutter SDK, so no separate Dart installation is required.

Installation

Android Studio Installation(Windows)

https://www.youtube.com/watch?v=0zx_eFyHRU0

Android Studio Installation(Mac)

https://www.youtube.com/watch?v=rNUoFXxT30U

Flutter Environment

Flutter Installation on Windows

https://www.youtube.com/watch?v=fDnqXmLSqtg

Flutter Installation on Mac

https://www.youtube.com/watch?v=mAQb57z7DZU

If you have updated you mac to Catalina from mojavi or earlier version then you may fetch some issues.Please follow bellow video to fix it.

https://www.youtube.com/watch?v=ZwUGHiroGBo

Change API Endpoint

  • Download Main_Files.zip from CodeCanyon and unzip the downloaded file.
  • Then go to the unziped folder & use your preferred IDE (Android Studio / Visual Code / IntelliJ) to open the AppSourceCode folder for project.
  • project/lib/services/urls.dart and change the apiBaseUrl to connect your mobile app with your admin panel & website

Android Configuration

Change App Name

  • Select Project > go to android > app > src > main > AndroidManifest.xml then change the android:label name

Change android luncher icon

  • For Flutter Android launcher icons, you need to provide icons in multiple sizes to support different screen densities. Here are the recommended icon sizes:
    MDPI (Medium Density): 48x48 pixels
    HDPI (High Density): 72x72 pixels
    XHDPI (Extra High Density): 96x96 pixels
    XXHDPI (Extra Extra High Density): 144x144 pixels
    XXXHDPI (Extra Extra Extra High Density): 192x192 pixels
  • then size wise store images in folder & all images name will be ic_launcher.png

Get Dependencies

  • And just run the following command
  • flutter pub get

Change Package Name

If you want to change the package name follow the next steps:

  • Open android/app/build.gradle.kts and update the namespace and applicationId fields with your new package name:
    android {
        namespace = "com.yourcompany.yourapp"
    
        defaultConfig {
            applicationId = "com.yourcompany.yourapp"
            minSdk = flutter.minSdkVersion
            targetSdk = flutter.targetSdkVersion
            versionCode = flutter.versionCode
            versionName = flutter.versionName
        }
    }
  • After updating the file, run the following command to apply the changes:
    flutter pub get

Generate Debug APK

  • Open a terminal at your project root and run the following command:
flutter build apk --debug
  • Once the build is complete, the debug APK will be available at: build/app/outputs/flutter-apk/app-debug.apk
  • You can install this APK on any Android device or emulator for testing purposes. Debug APKs are not optimized for production and should not be published to the Play Store.

Generate Release APK / App Bundle

Debug APK vs Release APK
  • Debug APK — Used for development and testing only. It is not signed with your release key, runs slower, and cannot be published to the Google Play Store.
  • Release APK / App Bundle — Signed with your private keystore, optimized for production, and required for publishing to the Google Play Store. This is what you generate in the steps below.
ℹ Important — Signing Configuration Required

The package does not include a release signing configuration. The android/app/build.gradle.kts file has no signingConfig set for the release build type. You must complete Steps 1–4 below and configure your own keystore before running flutter build apk --release or publishing to the Google Play Store.

⚠ Security Warning
  • Never share your keystore file (key.jks) or passwords with anyone.
  • Never commit key.jks or key.properties to Git or any public repository.
  • If you lose your keystore file, you will not be able to publish future updates to the same app on the Play Store. Keep a secure backup in multiple locations.
Step 1: Create the keys/ Folder
  • In your Flutter project root, create a folder named keys if it does not already exist. This folder will hold your keystore file.
  • Your project structure should look like this:
your_project/
  android/
  ios/
  lib/
  keys/          <-- create this folder
    key.jks      <-- keystore file will be placed here
Step 2: Generate a Keystore with keytool
  • A keystore is a file that holds the private key used to sign your app. Android requires every release APK to be signed before it can be installed or published.
  • Open a terminal at your project root and run:
keytool -genkey -v -keystore keys/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
  • You will be prompted to fill in the following information:
Enter keystore password:       (choose a strong password)
Re-enter new password:         (confirm password)
What is your first and last name?
What is the name of your organizational unit?
What is the name of your organization?
What is the name of your City or Locality?
What is the name of your State or Province?
What is the two-letter country code for this unit?  (e.g. US, BD)
Enter key password for <key>:  (choose a key password, can be same as keystore password)
  • After completing the prompts, the file keys/key.jks will be generated. Note down both passwords — you will need them in the next step.
Step 3: Create android/key.properties
  • This file tells the Android build system where your keystore is and what passwords to use. It must be placed inside the android/ folder (not inside android/app/).
  • Create the file android/key.properties with the following exact content — replace the placeholder values with the passwords you set in Step 2:
storePassword=your_store_password
keyPassword=your_key_password
keyAlias=key
storeFile=keys/key.jks
  • Add both files to your .gitignore to prevent them from being committed to version control:
# Add these lines to your .gitignore
keys/
android/key.properties
Step 4: Configure signingConfigs in android/app/build.gradle.kts
  • This step wires the keystore into the Android build process so that every release build is automatically signed.
  • Open android/app/build.gradle and add the following block at the very top of the file, before the android {} block:
import java.util.Properties
import java.io.FileInputStream

val keystorePropertiesFile = rootProject.file("key.properties")
val keystoreProperties = Properties()
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(FileInputStream(keystorePropertiesFile))
}
  • Then, inside the android { } block, add the signingConfigs section and update buildTypes as shown below:
android {
    ...

    signingConfigs {
        create("release") {
            keyAlias = keystoreProperties["keyAlias"] as String
            keyPassword = keystoreProperties["keyPassword"] as String
            storeFile = keystoreProperties["storeFile"]?.let { file(it) }
            storePassword = keystoreProperties["storePassword"] as String
        }
    }

    buildTypes {
        release {
            signingConfig = signingConfigs.getByName("release")
            isMinifyEnabled = true
            isShrinkResources = true
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
}
Step 5: Build the Release APK or App Bundle
  • Run one of the following commands from your project root depending on what you need:
# Generate a signed Release APK
flutter build apk --release

# Generate an App Bundle for Google Play Store upload (recommended)
flutter build appbundle --release
  • Signed Release APK output location: build/app/outputs/flutter-apk/app-release.apk
  • App Bundle output location: build/app/outputs/bundle/release/app-release.aab
  • Google Play Store requires an .aab (App Bundle) for new app submissions. Use .apk for direct device installation or beta distribution.
Troubleshooting
  • Error: "No such file or directory: keys/key.jks" — The keys/ folder does not exist. Create it manually at your project root before running the keytool command.
  • Error: "keytool is not recognized" — Java JDK is not installed or not added to your system PATH. Install the JDK and ensure it is accessible from your terminal.
  • Error: "Keystore file not found for signing config 'release'" — Check that the storeFile path in key.properties exactly matches the location of your key.jks file, and that key.properties is inside the android/ folder.
  • Error: "Invalid keystore format" — The keystore file may be corrupted. Delete it and regenerate using the keytool command in Step 2.

Push Notification Setup (Firebase FCM)

Step 1: Create a Firebase Project
  • Go to console.firebase.google.com and sign in with your Google account.
  • Click Add Project, enter a project name, and complete the setup wizard.
Step 2: Add Android App to Firebase
  • Inside your Firebase project, click the Android icon to add a new Android app.
  • Enter the Android package name — this must exactly match the applicationId in your android/app/build.gradle.kts file (e.g. com.yourcompany.yourapp).
  • Complete the registration and proceed to download the config file.
Step 3: Download and Place google-services.json
  • Download the google-services.json file from Firebase.
  • Place the file inside the android/app/ folder of your Flutter project:
your_project/
  android/
    app/
      google-services.json   <-- place here
      src/
      build.gradle.kts
Step 4: Add Google Services Plugin
  • Open android/app/build.gradle.kts and add the plugin at the top of the file:
plugins {
    id("com.google.gms.google-services")
}
  • Open android/build.gradle.kts (project-level) and add the classpath:
buildscript {
    dependencies {
        classpath("com.google.gms:google-services:4.4.2")
    }
}
Step 5: Get Dependencies
  • Run the following command from your project root to sync all dependencies:
flutter pub get
Step 6: Configure FCM Server Key in Admin Panel
  • In your Firebase project, go to Project Settings → Cloud Messaging and copy the Server Key.
  • In the Subsify admin panel, go to Settings → Push Notification, paste the server key, enable the toggle, and click Save.
✓ After completing these steps:
  • Push notifications will be delivered to customers when the admin sends them from the panel.
  • In-app notifications will also appear in the Notifications screen inside the customer app.

iOS Configuration

Change Bundle Identifier

  • The Bundle Identifier is the unique ID for your iOS app (e.g. com.yourcompany.subsify). It must be unique across all apps on the App Store.
  • Open your project in Xcode by running the following command from your Flutter project root:
open ios/Runner.xcworkspace
  • In Xcode, select the Runner target in the left sidebar, then go to the General tab.
  • Update the Bundle Identifier field to your own (e.g. com.yourcompany.subsify).
  • Update the Display Name field to your desired app name.
  • Set the Minimum Deployments target to iOS 13.0 or higher.
🛈 Note: The Bundle Identifier in Xcode must exactly match the one registered in your Apple Developer account and App Store Connect.

Code Signing & Provisioning Profiles

⚠ Prerequisites:
  • A Mac computer with the latest version of Xcode installed.
  • An active Apple Developer Program membership ($99/year) — developer.apple.com/programs
  • A physical iOS device for testing (the iOS Simulator cannot test push notifications or certain hardware features).
Step 1: Enable Automatic Signing (Recommended)
  • Open ios/Runner.xcworkspace in Xcode.
  • Select the Runner target → Signing & Capabilities tab.
  • Check the Automatically manage signing checkbox.
  • Select your Team from the dropdown (your Apple Developer account).
  • Xcode will automatically create and manage the provisioning profile and signing certificate for you.
Step 2: Manual Signing (Advanced)
  • If you prefer manual signing, uncheck Automatically manage signing.
  • Go to Apple Developer → Certificates, Identifiers & Profiles.
  • Create a Distribution Certificate (Apple Distribution) if you don't already have one.
  • Register your App ID (Identifiers section) with your Bundle Identifier.
  • Create a Provisioning Profile (App Store distribution type), link it to your App ID and certificate, then download and install it.
  • In Xcode, under Signing & Capabilities, select the downloaded provisioning profile for the Release build configuration.
⚠ Security Warning
  • Never share your distribution certificates or private keys.
  • Keep your signing certificates backed up securely. If lost, you must revoke and recreate them.

Build IPA & Upload to App Store

Step 1: Build the Release IPA
  • Open a terminal at your Flutter project root and run:
flutter build ipa --release
  • Once the build completes, the output .xcarchive will be available at: build/ios/archive/Runner.xcarchive
  • The exportable IPA file will be at: build/ios/ipa/
Step 2: Create Your App on App Store Connect
  • Go to App Store Connect and sign in with your Apple Developer account.
  • Click My Apps → + (New App) and fill in the required information:
    • Platform: iOS
    • Name: Your app name
    • Primary Language: English (or your preferred language)
    • Bundle ID: Select the Bundle Identifier you registered
    • SKU: A unique identifier (e.g. subsify-ios-v1)
Step 3: Upload Using Xcode or Transporter
  • Option A — Xcode: Open the archive in Xcode (Window → Organizer), select your archive, and click Distribute App → App Store Connect → Upload.
  • Option B — Transporter App: Download Transporter from the Mac App Store, drag and drop the .ipa file, and click Deliver.
Step 4: TestFlight (Beta Testing)
  • After uploading, the build will appear in App Store Connect under the TestFlight tab (processing may take 5–30 minutes).
  • Add internal or external testers, and they will receive an invitation to install the app via the TestFlight app on their iOS devices.
Step 5: Submit for App Store Review
  • In App Store Connect, go to your app → App Store tab.
  • Fill in the required metadata: screenshots (6.7" and 5.5" sizes), description, keywords, support URL, and privacy policy URL.
  • Select the uploaded build, complete the App Privacy questionnaire, and click Submit for Review.
  • Apple's review typically takes 24–48 hours. You will be notified via email once your app is approved.
Troubleshooting
  • Error: "No signing certificate found" — Ensure you have a valid Apple Distribution certificate installed in Keychain Access and that your Team is selected in Xcode.
  • Error: "Provisioning profile doesn't match" — The Bundle Identifier in Xcode must exactly match the App ID in your provisioning profile. Regenerate the profile if needed.
  • Build fails with CocoaPods error — Run cd ios && pod install --repo-update then try building again.
  • Archive not appearing in Organizer — Ensure you selected Any iOS Device (not a simulator) as the build target before archiving.
✓ After completing these steps:
  • Your iOS app will be available on the App Store for customers to download.
  • Future updates can be uploaded through the same process — increment the version in pubspec.yaml, rebuild, and upload.

User Guide

Splash

  • This opening screen shows the Subsify logo centered on a clean light background while the app loads.
  • After a short delay, the app checks the saved login session and redirects the user either to the customer home screen or to the onboarding flow.
  • Splash

Onboarding

  • The onboarding slider introduces the customer app experience before login.
  • Users can move through the introductory slides, tap Get Started, or skip forward into the authentication flow.
  • Onboarding

Welcome

  • This screen welcomes users back to Subsify and displays three clear actions: Continue with Guest, Sign up, and Login.
  • It acts as the main entry decision screen for customers who want to browse first, create an account, or sign in directly.
  • Welcome

Login

  • The login screen contains email and password fields, a Forgot Password? shortcut, social login buttons, and the main Login action.
  • Customers use this screen to access their existing account and continue to shopping, orders, and delivered products.
  • Login

Sign Up

  • The sign-up screen collects the customer's full name, email, password, and password confirmation.
  • It also shows social sign-in options and the main action button for creating a new account.
  • Sign Up

Home

  • The home screen starts with a personalized greeting, notification shortcut, promotional hero banner, and a View All option for categories and product sections.
  • Below that, customers can browse category cards and grouped product blocks such as Best Selling, Google Product, and Microsoft Product directly from the dashboard.
  • Home

Product Details

  • The product details page shows a large product banner, product name, price range, feature checklist, duration chips, participant chips, and a detailed product description.
  • At the bottom, the user can adjust quantity with plus/minus controls and tap Add to Cart.
  • Product Details

My Cart

  • The cart screen lists each selected product with image, title, price, quantity controls, and a remove icon.
  • A summary panel at the bottom displays subtotal, shipping, discount, and total cost before the customer proceeds to checkout.
  • My Cart

Checkout

  • The checkout screen shows contact information, address, and available payment methods in separate cards.
  • It also repeats the pricing summary and provides a clear Proceed Payment button to complete the order.
  • Checkout

Successful Order

  • After payment is completed, the app displays a centered success modal with the message Your Payment is Successful.
  • The customer can then tap Back to Shopping to return to browsing products.
  • Successful Order

Profile

  • The profile screen shows the customer avatar, name, email, quick order statistics, and a settings shortcut in the top-right corner.
  • It also provides direct access to Profile Details, Order History, Delivered Products, Expired Products, Notification, Change Password, and Logout.
  • Profile

Profile Details

  • This screen presents editable customer information including full name, email, phone number, gender, date of birth, and address.
  • The customer can also update the profile photo and save the modified account information with the bottom action button.
  • Profile Details

Order History

  • Order History lists purchased subscriptions with product image, order ID, quantity, price, and current status badges such as Active or Expired.
  • This gives the customer a simple chronological overview of completed purchases inside the app.
  • Order History

Delivered Products

  • This section focuses only on active delivered products that are currently usable by the customer.
  • Each card highlights the product image, subscription title, order information, price, and an Active status label.
  • Delivered Products

Expired Products

  • Expired Products separates subscriptions that are no longer active from the currently delivered list.
  • Each card keeps the same compact layout but marks the item clearly with a red Expired badge.
  • Expired Products

Notifications

  • The notification screen displays customer alerts in a stacked list layout with icon, title, short message, and timestamp.
  • Users can review recent product or account-related updates from this page without leaving the app.
  • Notifications

Change Password

  • Change Password opens as a bottom sheet over the profile screen and contains fields for current password, new password, and confirm new password.
  • The customer can cancel the action or save the updated password immediately from the same panel.
  • Change Password

Logout

  • Logout also appears as a confirmation bottom sheet instead of leaving the app immediately.
  • The user must confirm with Yes or dismiss with No, which helps prevent accidental sign-out.
  • Logout

Settings

  • The settings screen contains the app preference controls for language, notifications, dark mode, and delete account.
  • From here the customer can switch language, toggle notification and theme behavior, or move into account deletion actions.
  • Settings

Categories

  • The category screen presents the product catalog as a grid of subscription categories such as AI Grammar, Apple Store, Figma Plan, Streaming, VPN Premium, and more.
  • Customers can tap any category tile to narrow product browsing to that subscription type.
  • Categories

Search Product

  • The search screen provides a search bar at the top and shows recent product search terms underneath.
  • This allows the customer to quickly repeat recent searches or type a new product query from the mobile keyboard.
  • Search Product

RTL / LTR

  • This screenshot demonstrates the localized right-to-left presentation of the customer app interface.
  • The same home layout adapts to RTL languages by changing text flow, alignment, and section direction while keeping the shopping structure intact.
  • RTL / LTR

Dark Mode

  • Dark mode applies a darker visual theme to the same customer home interface for better night-time viewing and visual preference.
  • Cards, navigation, banners, and product sections remain consistent while colors and contrast shift to the dark theme palette.
  • Dark Mode

Run & Build

Run Android Application

  • In the target selector, select an Android device for running the app. If none are listed as available, select Tools> Android > AVD Manager and create one there. For details, see Managing AVDs. Click the run icon in the toolbar, or invoke the menu item Run > Run. Locate the main Android Studio toolbar:
  • If you don't use Android Studio or IntelliJ you can use the command line to run your application using the following command
  •                         
                              flutter run
                            
                          

Build And Install App

  • After you make all your changes and customizations save all your project, Open the console, navigate to your project folder and execute the following command to build your app flutter build apk --release
  • If you are deploying the app to the Play Store, it's recommended to use app bundles or split the APK to reduce the APK size.
  • To generate an app bundle, run: flutter build appbundle --target-platform android-arm,android-arm64,android-x64
    Learn more on https://developer.android.com/guide/app-bundle
  • To split the APKs per ABI, run: flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi
    Learn more on https://developer.android.com/studio/build/configure-apk-splits#configure-abi-split
  • You should get the APK file in the build/output/apk folder, to install your application on your connected device run the following command