How to Build Laravel eCommerce Mobile App on Flutter

Updated 20 February 2024

In this user guide for How to Build Laravel eCommerce Mobile App on Flutter, we will be explaining to you the procedure to install the open-source eCommerce app on the server end and the app end.

You can also check the video for a better understanding –


Server End Installation Workflow – Laravel eCommerce Mobile App

Follow the below-mentioned steps in sequence –

1: You need to check on your server that you have installed the latest Bagsito version 2.0.0 which can be downloaded via Git Hub.

You can check the Bagisto Installation User Guide for detailed information.

The Laravel platform, which is open-source and headless, utilizes a GraphQL-based API to provide incredibly fast, dynamic, and customized shopping experiences.

2: Now, we need to clone Bagisto GraphQL. For the same, run the below command from the terminal:

After that, Add the below line inside the modules index in the config/concord.php file

3: Find the file app/Http/Kernel.php from the root and add these two middlewares inside the $middleware array:

4: Find the file config/auth.php from the root and the below code inside guard:

5: Find a file config/auth.php from root and bellow code inside providers:

6: Add the JWT_TTL (JWT time to live) & JWT_SHOW_BLACKLIST_EXCEPTION entries in the .env file:

7: To install and publish the assets and configurations, run the below command from the root in the terminal –

Now to use the graphql-playground for testing the APIs –

You can also use the Postman for testing the APIs:


That’s it, now just execute the project on your specified domain.

App End – Installation Workflow

After making the sever end configurations, now we will proceed to the app end installation part.

First of all, you need to make sure that the below-mentioned things are installed –

It is recommended that you run a simple Hello World program in Flutter first before proceeding further so that you are sure that the environment is properly set up.

Configurations – Local Terminal

After going through the above procedures, now on your local system terminal, you have to –

Clone the Repository

Install Dependencies

Navigate to the project’s directory and run the below command.

Now, run the following command to install the required packages.

Connect a Device or Emulator

Physical Device


For Setup

Change the base URL as per your store

Path: lib/utils/server_configuration.dart

Note: Add the value of the complete URL ending with the GraphQL API endpoint. E.g –

Run the Project

Use the below command to build and run the project.

Minimum Versions

Configurations Steps


Change the Theme for your app

Path: lib/utils/mobikul_theme.dart

Push Notification Service

Replace “google-services.json”.

Replace “GoogleService-Info.plist”.

Helpful Articles

Android →Generating Google-Service File To Enable FCM(Firebase Cloud Messaging) In The Android Application.

iOS → Generating A New GoogleService-Info.Plist File For The FCM Based Project For IOS App.

Application Title

For Homepage Header Title – Go to ‘assets/language/en.json’ (Note: Here, “en” in en.json refers to the languages that would be supported within the application)

Splash Screen

App Icon

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home