Basketly Flutter App UI Template

Package Overview

Basketly is a customer-side Flutter UI template for grocery delivery, quick commerce, supermarket, and local essentials apps. It includes onboarding, authentication, shopping, checkout, live order tracking, customer profile management, and support-related screens.

The project is designed so you can start with mock data for presentation and then replace the mock service layer with your own REST API, custom backend, or app platform integration.

Screen Previews

The preview images below show the key customer app flows included in Basketly. They help buyers quickly understand the visual style before running the Flutter project.

Onboarding

Launch screen with premium grocery positioning and account entry actions.

Login

Returning customer sign-in screen with phone-based entry flow.

Create Account

Registration screen for new customers entering the app for the first time.

OTP Verification

Verification step used before entering the customer shopping experience.

Location Permission

Location access prompt for delivery address and nearby grocery availability.

Home

Featured promotions, search entry, categories, and popular products.

Category

Category filters and product cards for browsing grocery items.

Product Details

Product information, pricing, quantity controls, and add-to-cart action.

Cart

Cart items, quantities, coupons, and order total before checkout.

Checkout

Delivery address, payment method, summary, and order placement flow.

Orders

Active and previous order overview for customer order management.

Live Tracking

Order progress, delivery route preview, and rider contact actions.

Profile

Account management, addresses, payments, coupons, support, and settings.

Requirements

• Flutter SDK compatible with the project environment
• Dart SDK compatible with sdk: ^3.9.2
• Android Studio, VS Code, or another Flutter-supported editor
• An Android emulator, iOS simulator, or a real device

Dependencies Used

• cupertino_icons
• google_fonts

Installation & Getting Started

Follow these steps in order. They work whether you're a developer setting up the project for the first time or a non-technical buyer just previewing the app before handing it to a developer.

Step-by-Step Commands

1. Download and extract the purchased package.
2. Open the extracted project folder in your Flutter editor (Android Studio, VS Code, or similar).
3. Set up the Flutter SDK if it isn't installed yet:
   • Download the Flutter SDK for your OS from docs.flutter.dev/get-started/install and extract it to a permanent folder (for example C:\src\flutter on Windows or ~/development/flutter on macOS/Linux).
   • Add the SDK's bin folder to your system PATH:

     # macOS / Linux — add to ~/.zshrc or ~/.bashrc
     export PATH="$PATH:$HOME/development/flutter/bin"
     
     # Windows — add via System Environment Variables
     # Add the full path to flutter\bin, e.g. C:\src\flutter\bin

   • Restart your terminal (or editor) so the updated PATH takes effect.
   • Verify the setup and install any missing platform tools it flags:

     flutter doctor

   • Resolve anything flutter doctor marks with an ✗ (Android SDK, Xcode, CocoaPods, etc.) before continuing — the project won't build correctly until every relevant check passes.
4. Fetch the project dependencies from the project root:

   flutter pub get

5. Make sure a simulator, emulator, or physical device is connected and available.
6. Run the app:

   flutter run

7. Optional — validate the project before making changes:

   flutter analyze
   flutter test

Production Build Guide

Before creating a release build, replace demo branding, set your final app identifier, test on real devices, and connect any production backend services you need.

Android Release Build

1. Open android/app/build.gradle.kts and confirm your final namespace, applicationId, compileSdk, targetSdk, versionCode, and versionName.
2. Create a release signing key if you do not already have one:

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

3. Configure Android release signing in your normal Flutter/Android workflow. Keep passwords and keystore files private and do not share them with buyers or public repositories.
4. Clean the project and download packages:

   flutter clean
   flutter pub get

5. Run a quick quality check:

   flutter analyze
   flutter test

6. Build the Android App Bundle for Play Store upload:

   flutter build appbundle --release

7. The generated release file is usually available at build/app/outputs/bundle/release/app-release.aab.
8. If you need a direct install APK for testing, run:

   flutter build apk --release

iOS Release Build

1. Use macOS with Xcode installed and an active Apple Developer account.
2. Open ios/Runner.xcworkspace in Xcode.
3. Select the Runner target and confirm the bundle identifier, display name, team, signing certificate, and provisioning profile.
4. From the project root, clean and install packages:

   flutter clean
   flutter pub get

5. Build the iOS release:

   flutter build ios --release

6. To create an App Store archive, open Xcode and choose Product > Archive, then upload the archive from Xcode Organizer.
7. Alternatively, create an IPA with Flutter:

   flutter build ipa --release

8. The generated IPA is usually available under build/ios/ipa/.

Project Structure

Navigation Flow Map

Basketly starts with the launch and authentication flow, then opens the customer shell with five main tabs. Secondary screens are opened from those tabs as needed.

Customization Guide

1. Change the App Name

The visible app title inside Flutter is currently set in lib/app.dart:

title: 'Basketly'

For store-ready publishing, also update the Android and iOS display names and identifiers using your preferred Flutter rename workflow before release.

2. Change Colors and Typography

Global design tokens live in lib/theme/app_theme.dart. Update these values to match your own brand:

• AppTheme.accent for primary action color
• AppTheme.canvas for overall app background
• AppTheme.surface and AppTheme.surfaceMuted for cards and chips
• GoogleFonts.plusJakartaSans usage if you want a different font family

3. Change Product Images

Replace the demo product images inside assets/images/products/ and keep the file paths updated in your product data source or API payload.

4. Change Demo Content

If you are still using the mock setup, update demo content in:

• lib/data/mock_data.dart
• lib/services/mock_store_api_service.dart

Logo, Splash Screen, and Display Name

This section is written for non-technical buyers who only need to replace the visible app branding before handing the project to a developer or publishing team.

1. Update the Display Name

1. For Android, open android/app/src/main/AndroidManifest.xml.
2. Find android:label="Basketly" and replace Basketly with your app name.
3. For iOS, open ios/Runner/Info.plist.
4. Update CFBundleDisplayName and CFBundleName to your app name.
5. In Flutter, open lib/app.dart and update title: 'Basketly'.

2. Update the App Logo

1. Prepare a square logo image, preferably at least 1024x1024 pixels.
2. Replace Android launcher icons inside android/app/src/main/res/mipmap-*/.
3. Replace iOS app icons inside ios/Runner/Assets.xcassets/AppIcon.appiconset/.
4. Keep the existing filenames and icon sizes unless your developer regenerates the icon set with a Flutter icon tool.
5. Run the app on Android and iOS to confirm the new icon appears on the device home screen.

3. Update the Splash Screen

1. For Android, update the launch background files in android/app/src/main/res/drawable/launch_background.xml and android/app/src/main/res/drawable-v21/launch_background.xml.
2. For iOS, open ios/Runner/Base.lproj/LaunchScreen.storyboard in Xcode and replace the launch screen artwork or colors.
3. Keep the splash screen simple because it only appears while Flutter is starting.
4. After changing splash assets, run flutter clean, then flutter pub get, and test again on a real device or simulator.

4. Update the Package Name

The package name (also called the application ID on Android and the bundle identifier on iOS) has to be changed in a few places so Android, iOS, and your Flutter code all agree.

1. Easiest option — use a rename tool. From the project root, run:

   dart pub global activate rename
   rename setBundleId --value "com.yourcompany.yourapp" --targets android,ios

   This updates the Android applicationId and the iOS PRODUCT_BUNDLE_IDENTIFIER in one step.
2. Manual option — Android. Open android/app/build.gradle.kts and replace both the namespace and applicationId values (currently com.basketly.app) with your new package name.
3. If your Android project still has a Kotlin/Java source path matching the old package (for example android/app/src/main/kotlin/com/basketly/app/MainActivity.kt), move MainActivity.kt into a folder path that matches your new package name, and update the package declaration at the top of that file to match.
4. Confirm android/app/src/main/AndroidManifest.xml does not hardcode the old package name anywhere (most templates read it from build.gradle.kts automatically, but double-check custom entries such as deep links or provider authorities).
5. Manual option — iOS. Open ios/Runner.xcworkspace in Xcode, select the Runner target, open the General tab, and replace the Bundle Identifier (currently com.basketly.app) with your new package name.
6. After changing the package name, run flutter clean, then flutter pub get, and do a fresh flutter run to confirm both platforms build under the new identifier before you create a release build.
7. Keep the Flutter app title, the display name, and the store-facing package name aligned so your builds remain easy to manage.

Backend Integration

Basketly is already structured to support backend implementation. The current default flow uses a mock repository and a mock API service, but the architecture is ready for a real data source.

Current Architecture

The UI layer talks to the controller, which uses the repository contract, and that repository calls the service layer for data. This keeps the screens clean while making it simple to swap the mock implementation for your own backend.

How to Connect Your Own Backend

1. Create your own API service class implementing StoreApiService.
2. Connect it to your repository implementation.
3. Pass that repository into AppController.
4. Inject the controller into GroceryApp or replace the default factory in lib/app.dart.

abstract interface class StoreApiService {
  Future<List<Map<String, dynamic>>> fetchProducts();
  Future<List<String>> fetchFeaturedCategories();
  Future<Map<String, int>> fetchCartQuantities();
  Future<List<String>> fetchWishlistIds();
  Future<void> updateCartItem({
    required String productId,
    required int quantity,
  });
  Future<void> clearCart();
  Future<void> toggleWishlist(String productId);
}

Backend / Server Troubleshooting

This item does not include a ready-made backend or server. If you connect Basketly to your own API and run into issues, use the checks below to identify the most common integration problems.

1. The app still shows demo products instead of live data

• Confirm your app is no longer using MockStoreApiService.
• Make sure your repository is wired to your real StoreApiService implementation.
• Check the default controller creation in lib/app.dart and verify the mock repository has been replaced.

2. API requests fail immediately

• Verify your base URL, endpoint paths, headers, and authentication tokens.
• Make sure your backend server is online and reachable from the test device or emulator.
• If you are testing locally, confirm the emulator or simulator can access your local machine or test server.
• Review console logs for HTTP status codes such as 401, 403, 404, or 500.

3. Data loads, but the UI looks empty or incomplete

• Check that your API response keys match the fields expected by your repository and models.
• Confirm product IDs, image paths, prices, and category values are present and not null.
• Verify that image URLs or local asset references are valid.

4. Cart or wishlist updates do not persist

• Confirm your backend implements the write methods used by the app such as updateCartItem, clearCart, and toggleWishlist.
• Check whether your API requires a logged-in user, session, or authorization header for write operations.
• Make sure the backend returns success responses after updates and that the app refreshes state afterward.

5. Live tracking, payments, or notifications are not working

• These features require your own backend logic and, in many cases, third-party services or SDKs.
• For example, live tracking may need a maps provider and location updates, while payments may need a payment gateway account and secure server-side processing.
• If those services are not yet integrated, the UI can still be used as a front-end template.

Backend / Server FAQ

Does this purchase include a backend or admin panel?

No. This item is a Flutter customer app UI template only. A production backend, database, admin panel, delivery app, payment server logic, and live operations system are not included.

Why is there a backend-related folder structure if no backend is included?

The project includes repository and service layers so buyers can connect the UI to their own backend more easily. These files provide an integration-ready structure, not a hosted server product.

Is mock data included?

Yes. The template ships with mock data and a mock API service so the UI works out of the box for preview, testing, and customization before real backend integration.

Can I connect this template to REST API, Firebase, Supabase, or a custom server?

Yes. You can replace the mock service layer with your own implementation and map the returned data into the app's repository and controller flow.

Are authentication, payment, and order tracking fully functional by default?

No. Their UI flows are included, but production functionality depends on your own backend, business rules, third-party services, and integration work.

What support is covered for backend questions?

Support can help explain the existing Flutter file structure and where backend integration should happen. Full backend development, deployment, database design, server maintenance, and third-party account setup are outside the scope of a UI template unless agreed separately.

Included Screens

Full Screen List

1. Onboarding Screen
2. Sign In Screen
3. Sign Up Screen
4. OTP Verification Screen
5. Forgot Password Screen
6. Location Permission Screen
7. Home Screen
8. Catalog Screen
9. Search Screen
10. Search Results Screen
11. Product Detail Screen
12. Wishlist Screen
13. Notifications Screen
14. Cart Screen
15. Checkout Screen
16. Address List Screen
17. Address Form Screen
18. Payment Methods Screen
19. Coupons Screen
20. Order Success Screen
21. Orders Screen
22. Order Detail Screen
23. Live Tracking Screen
24. Profile Screen
25. Edit Profile Screen
26. Support Screen
27. Chat Support Screen
28. Settings Screen

Assets and Images

Product images used in the template are stored in assets/images/products/. If you replace them, keep filenames and paths aligned with the data used in your app.

Release Notes for Buyers

• This package is a Flutter customer app UI template.
• It is suitable for Android and iOS Flutter projects.
• The app currently uses mock data by default.
• You should connect your own backend before production deployment.
• You should replace demo branding, package identifiers, store listing assets, and any sample content before release.