Skip to content
Get packs

Guide · Open source

How to use opensource-ecommerce-mobile-app: setup and configuration

Updated · written with AI from the project's own documentation and checked against our catalogue data

opensource-ecommerce-mobile-app is a Flutter-based mobile shopping app that reads products, categories and orders from a Bagisto online store, a Laravel-based ecommerce system. This guide is for Bagisto store owners and Flutter developers who want a mobile front end for an existing shop. By the end you will know the prerequisites, how to clone and run the project, and where to point it at your own store.

Bagisto Mobile Appbagisto/opensource-ecommerce-mobile-app · ★ 16.1k · MIT

Quick start

  1. 1Check prerequisites. Install Bagisto v2.0.0 or higher with the bagisto-api module, plus the Flutter, Dart and Android Studio versions listed in the README.
  2. 2Clone the repository. Run git clone with the repository URL and move into the project folder.
  3. 3Install packages. Run flutter pub get in the project directory to install dependencies.
  4. 4Connect a device or emulator. Enable USB debugging on a physical device or start an emulator.
  5. 5Set your store endpoint. Edit lib/core/constants/api_constants.dart with your GraphQL endpoint and storefront key.
  6. 6Run the app. Run flutter run to build and launch the project.

What you need before you start

The README lists specific versions. Install these before cloning the project, and make sure your Bagisto store runs with the API module set up properly.

Run a simple Hello World program in Flutter first to confirm your environment works.

  • Bagisto v2.0.0 or higher
  • The bagisto-api module installed and configured on your Bagisto store
  • Android Studio Meerkat 2024.3.2
  • Flutter 3.38.9
  • Dart 3.10.8
  • Xcode 26.3 and Swift 6.1 (for iOS builds only)

Clone the repository and install dependencies

Open a terminal, move to the folder where you want the project, and clone the repository. Then enter the project directory and install the required packages.

  • Navigate to the directory where you want to save the project
  • Enter the project folder with cd <repository-name>
git clone https://github.com/bagisto/opensource-ecommerce-mobile-app.git cd <repository-name> flutter pub get

Connect a device or emulator and run the app

For a physical Android or iOS device, enable USB debugging and connect the device with a USB cable. For testing, start an Android or iOS emulator from your preferred IDE or tools.

Then build and run the project from the project folder.

  • Physical device: enable USB debugging and connect by USB cable
  • Emulator: start an Android or iOS emulator using your IDE or tools
flutter run

Point the app at your Bagisto store

Open lib/core/constants/api_constants.dart and set the Bagisto GraphQL endpoint, the storefront key and your company name. The README says to get the storefront key from your Bagisto admin panel.

  • bagistoEndpoint: your GraphQL endpoint, for example https://your-bagisto-server.com/graphql
  • storefrontKey: copied from the Bagisto admin panel
  • companyName: optional metadata
const String bagistoEndpoint = 'YOUR_BAGISTO_ENDPOINT_HERE'; const String storefrontKey = 'YOUR_STOREFRONT_KEY_HERE'; const String companyName = 'Your Company Name';

Customize colours, name, splash screen and icon

Theme colours are set in the AppColors class. Change primary500 to your main colour and make primary600 a slightly darker shade for pressed states.

The Android app name is set in android/app/src/main/AndroidManifest.xml. On iOS, change the display name in the General tab. The splash image is assets/images/splash.png. The README gives no separate command for icons beyond the steps below.

  • Theme: replace the hex value in primary500 and adjust primary600
  • Android name: android:label in AndroidManifest.xml
  • iOS name: General tab, display name
  • Splash: assets/images/splash.png
  • Android icon: in Android Studio, right-click app > new > Image Asset
  • iOS icon: replace the files in ios/Runner/Assets.xcassets/AppIcon.appiconset
static const Color primary500 = Color(0xFFFF6900); static const Color primary600 = Color(0xFFF54900);

Set up push notifications

Push notifications use Firebase Cloud Messaging. Replace google-services.json for Android and GoogleService-Info.plist for iOS with files generated for your own project. The README links to Mobikul articles that explain how to generate them.

  • Android: replace google-services.json
  • iOS: replace GoogleService-Info.plist

What people use it for

  • A Bagisto store owner offering a mobile storefront for Android and iOS alongside the website
  • A Flutter developer customizing a working shopping app with their own colours and branding
  • A team that already runs the Bagisto API module adding a mobile front end to an existing shop
  • Adding push notifications through a team's own Firebase project

Frequently asked questions

Is opensource-ecommerce-mobile-app free to use?

The repository is licensed under the MIT license, as stated in the README. The README does not list prices, so check the Bagisto site for any paid services you might add.

What do I need to run opensource-ecommerce-mobile-app?

You need Bagisto v2.0.0 or higher with the bagisto-api module, Flutter 3.38.9, Dart 3.10.8 and Android Studio Meerkat 2024.3.2. iOS builds also need Xcode 26.3 and Swift 6.1. You also need a device or emulator.

Can I use this app without a Bagisto store?

No. The app depends on a Bagisto backend and the API module, so it cannot read products or orders without one.

Is this a plug-and-play app?

No. Setup requires Flutter, a device or emulator, and editing configuration files such as api_constants.dart. It suits developers more than non-technical store owners.

Why does flutter run fail after cloning?

The README recommends first running a simple Hello World Flutter program to confirm the environment is set up correctly. Check that your Flutter, Dart and Android Studio versions match the list in the README, then run flutter pub get again.

What features does the app include?

The README mentions real-time sync of products and categories, discount coupons, guest checkout, wishlists, product reviews, order details, dark mode and push notifications.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this app if you already run a Bagisto store and want a Flutter-based mobile front end you can rebrand and extend. Pick a different option if you have no Bagisto backend or want a ready-made app with no code or configuration work.

Install options & downloads