Flutter Ecommerce Template

Flutter Ecommerce Template

    Here we will focus for the e-commerce templating part. We will learn how to set up configuration and little changes make the app reusable for various purposes.

    This article is for those who bought the code. You could learn here how to set up the app in your local environment as well in a server and make the related changes. Here you will learn how to do complete customization.

    Install android studio

    First you need to have android studio installed in your local machine. Watch the video below to know about how to install android studio and flutter in your machine.

    After installing android studio, you can just open the downloaded app file in the android studio. Just drag and drop on the android or vscode icon.

    Deploy locally

    Let's how to see install the downloadable code locally. Make sure you have flutter installed with latest SDK. As of this, the downloadable code is the latest version(3.4). Watch the video how to deploy locally

    As you try to deply locally do ADMIN_HTTPS=false. On the real world server you should deploy it as ADMIN_HTTPS=true. And then run the below commands

    1. php artisan config:clear
    2. php artisan cache:clear
    3. php artisan serve

    First two commands are always useful if change .env file or change routes.

    Also make sure the base url in the front end code

    1. for iOS (check your port with php artisan serve)
    2. for Android (check your port php artisan serve)

    Try without phone number verification (commercial licence)

    Here in the video you will learn how to try it without phone number verification.

    Twilio phone number verification (commercial licence)

    Here we used third party twilio to phone number verification. See the set up here.

    Change your project name

    First thing you wanna do is to change the project name. You should change it as per your need. Watch video below to change the project name. This change project name method applies to any flutter projects.

    Change app package name

    Here you will learn how to change your app package name. This package name change is a must. Without this you won't be able to submit your in the app store. If you don't change the package name, it will conflict with other developer's package name.

    Change app name

    You should change your app name. Watch video how to change the app name. App name a lot of time goes with package name or bundle identifier.

    Change app logo

    Since you are publishing your own app, it should goes with app logo. Learn how to change the app logo.

    Firebase project set up

    Since this app depends on Firebase you have to create a Firebase project and get the GoogleService-info.plist for iOS and google-services.json for Android. The below video shows to create a Firebase project for android.

    Google Map api key

    Since this app depends on Google Map, you have create a billing account in and create project there to get Google Map api key.


    If you want to view Google Map in the project you must set up your own account in the above link and create a project.

     Android users should put the key  in the application manifest android/app/src/main/AndroidManifest.xml

    <manifest ...
      <application ...
        <meta-data android:name="com.google.android.geo.API_KEY"
                   android:value="YOUR KEY HERE"/>


    iOS user put the key ios/Runner/AppDelegate.swift
    import UIKit
    import Flutter
    import GoogleMaps
    @objc class AppDelegate: FlutterAppDelegate {
      override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
        GMSServices.provideAPIKey("YOUR KEY HERE")
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)

    SHA1 Key

    You need to get SHA1 key for android Google map.

    Place order notification backend

    Here you will learn how to place order and get backend notification and show a pop up page for the order. It's based on firebase service as well

    Install the backend locally on windows

    It shows how to install the downloaded backend in a local windows machine. Just follow the steps to do it.

    Install the backend locally on Mac

    It shows how to install the downloaded backend in a local Mac machine. Just follow the steps to do it.

    Hosting on Hostgator

    If you wanna host the app in live server watch the video below


    Strongly recommend to watch and finish the video below. The below video teaches you to build admin panel step by step.

    Hosting on Namecheap

    Select service zone

    Learn how to choose zone for your business

    Enable iOS push notification

    You should watch the below video if you wanna enable iOS push notification. You just follow the set up but not the coding part. Just follow the different set up for the apps.

    Upload APNS for iOS Firebase

    Additional Tips

    The below tips helps you to learn more and better grasp for the app.

    1. Google Map Api Key Test With Postman

    2. Postman push notification test

    3. Firebase cms token and getx null


    Recent posts