How to Build Laravel eCommerce Mobile App on Flutter

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 –

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.

composer require bagisto/graphql-api dev-main

1	composer require bagisto/graphql-api dev-main

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

\Webkul\GraphQLAPI\Providers\ModuleServiceProvider::class,

1	\Webkul\GraphQLAPI\Providers\ModuleServiceProvider::class,

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

\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class,

1 2	\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class,

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

'api' => [ 'driver' => 'jwt', 'provider' => 'customer', ], 'admin-api' => [ 'driver' => 'jwt', 'provider' => 'admin', ],

1 2 3 4 5 6 7 8 9

'api' => [             'driver'   => 'jwt',             'provider' => 'customer',         ],      'admin-api' => [             'driver'   => 'jwt',             'provider' => 'admin',         ],

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.

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 –

• Android Studio Version – Flamingo | 2022.2.1
• Flutter Version – 3.10.1
• Dart – 3.0.1
• Xcode – 14.3
• Swift – 5

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.

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

Clone the Repository

• Open your terminal or command prompt
• Navigate to the directory where you want to save the project
• Use the git clone command followed by the repository URL

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

• Enable USB debugging on your device
• Connect it to your computer using a USB cable.

Emulator

• Start an Android emulator using your preferred IDE or tools.

For Setup

Change the base URL as per your store

Path: lib/utils/server_configuration.dart

static const String baseUrl = ‘....’<span class="pl-k">;</span>

1	static const String baseUrl = ‘....’<span class="pl-k">;</span>

Note: Add the value of the complete URL ending with the GraphQL API endpoint. E.g – https://example.com/graphql

Run the Project

Use the below command to build and run the project.

Minimum Versions

• Android: 21
• iOS: 12

Configurations Steps

Theme

Change the Theme for your app

Path: lib/utils/mobikul_theme.dart

Push Notification Service

• Android

Replace “google-services.json”.

• iOS

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

• Android

  1. Path: android/app/src/main/AndroidManifest.xml
  2. Change app name: android:label=”***********”

• iOS

  1. Go to the general tab and identity change the display name to your app name

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

• For adding Lottie as Splash Screen

  1. Path: assets/lottie/splash_screen.json
  2. After updating the Lottie file, update the ‘splashLottie’ in lib/utils/assets_constants.

• To add an Image as a Splash Screen

  1. Path: assets/images/splash.png
  2. After updating the Image file, update the ‘splashImage’ in lib/utils/assets_constants.

App Icon

• Android: Open the Android folder in Android Studio and then right-click app > new > Image Asset Set Image.
• iOS: Replace the icons over the path > ios/Runner/Assets.xcassets/AppIcon.appiconset
  

Nishad Bhan

• 8 Aug, 2024
  Updated by - Rishabh Yogi
• 20 Feb, 2024
  Updated by - Nishad Bhan

View More