This blog is your step-by-step guide to follow along and build a fully functional digital asset selling appusing Flutter, Firebase, and PayHere, powered by Cursor AI.

🎯 What You’ll Build

A mobile app where users can:

• Register/Login

• Browse categories and assets (images, eBooks, etc.)

• Preview asset details

• Buy assets via PayHere in LKR

• Download purchased files

🧰 Tech Stack

⚙️ Setup Instructions

Before you start building features, make sure the app is correctly configured:

1. 🔧 Create a Flutter project and set up Git

2. 🔧 Configure Firebase using Firebase CLI

   Create Firebase Account
   📄 Firebase CLI Setup Guide

3. 📂 Seed dummy data into Firebase (assets & categories)
   📥 Download Sample Data

4. 🔐 Cursor Rules
   🔗 Cursor Rules

5. 💳 Create a PayHere Sandbox Account
   🔗 PayHere Sandbox Sign Up

🚀 Feature Breakdown + Cursor Prompts

Each section below explains the feature and includes a prompt you can paste directly into Cursor to generate the code.

🔐 1. User Registration/Login

Allow users to register and login with email and password.

🎯 Cursor Prompt

Create a login and signup screen using Firebase Authentication. Use email/password and enable persistent login. Redirect to Home after successful login. Include error messages and loading indicators.

🏠 2. Home Screen (Categories + Assets)

Display asset categories in a horizontal list and assets below in a grid.

🎯 Cursor Prompt

Create a Flutter Home Screen that integrates with Firebase Firestore.

– Fetch categories from the `categories` collection.
– Show them in a horizontally scrollable list.
– Fetch assets from the `assets` collection.
– Below the categories, display assets in a grid view.
– Each asset card should display:
– preview image (from `previewUrl`)
– title
– category
– price (with “LKR” as currency)

– When a category is tapped, filter the assets based on that category.
– When an asset is tapped, navigate to an Asset Preview screen.

Firestore Collection Names:
– categories
– assets

Asset Model:
{
“title”: “Minimalist Wallpaper”,
“description”: “Clean high-res wallpaper for mobile screens.”,
“category”: “Wallpapers”,
“price”: 250,
“currency”: “LKR”,
“previewUrl”: “https://cdn.com/thumb.jpg”,
“downloadUrl”: “https://cdn.com/full.jpg”
}

Category Model:
{
“id”: “id”,
“name”: “Audio”
}

👁️ 3. Preview Asset Screen

Let users view asset details before purchase.

🎯 Cursor Prompt

Create an Asset Detail screen that shows preview image, title, description, category name, and price in LKR. Add a “Buy Now” button at the bottom. Use Hero animation for smooth transition from Home to Detail screen.

💳 4. Buy & Pay via PayHere

Seamless checkout in Sri Lankan Rupees.

🎯 Cursor Prompt

Integrate payhere_mobilesdk_flutter for in-app payment. On “Buy Now” button tap, launch PayHere sandbox checkout with test merchant credentials. After successful payment, save purchase to Firestore under the current user.

⬇️ 5. Download Purchased Assets

Allow users to download and store assets after payment.

🎯 Cursor Prompt

After payment, show a "Download" button. Use gallery_saver to download and save the asset to the device. Create a “Downloads” screen that lists purchased assets using data from Firestore under users/{uid}/purchases.

🧱 6. Firestore Collections

Organize data clearly in Firestore.

🎯 Cursor Prompt

Set up 3 Firestore collections: categories, assets, and users.
Each asset includes: title, description, price (LKR), category, previewUrl, and downloadUrl.
Each user document contains a list of purchased asset IDs and download URLs.

📥 Example JSON (for Firestore assets)

{
  "title": "Minimalist Wallpaper",
  "description": "Clean high-res wallpaper for mobile screens.",
  "category": "Wallpapers",
  "price": 250,
  "currency": "LKR",
  "previewUrl": "https://cdn.com/thumb.jpg",
  "downloadUrl": "https://cdn.com/full.jpg"
}