opensource-ecommerce-mobile-app Documentation

File: README.md Copy Chapter

Open Source eCommerce Mobile App

Bagisto revolutionizes the world of mobile commerce with its open-source eCommerce mobile app solution. This open-source mobile ecommerce app seamlessly transforms your Bagisto store into a powerful mobile platform, providing real-time synchronization of products and categories. With a user-friendly interface, managing orders becomes a breeze, making it an essential tool for tech-savvy individuals and those new to eCommerce.

This mobile app, built on the foundation of the Bagisto eCommerce framework and leveraging the robust Laravel stack, offers many features for a comprehensive and efficient mobile shopping experience. The app ensures easy product information management and accelerates time-to-market for your products, all while giving you complete control over your store.

Live Demo

Android: https://play.google.com/store/apps/details?id=com.webkul.bagisto.mobikul

iOS: https://apps.apple.com/us/app/mobikul-bagisto-laravel-app/id6447519140

Features

The open-source ecommerce mobile app comes with an array of features to improve your customers' shopping experience.

Interactive Home Page and Search Copy Chapter

All Type Product Supported Copy Chapter

Dark Mode and Push Notification Copy Chapter

Discount Coupons and Guest Checkout Copy Chapter

Wishlist and Product Category Copy Chapter

Order Details and Product Reviews Copy Chapter

Installation Guide Copy Chapter

Before beginning with the installation, you will need the following with the mentioned versions

• Bagisto Version - Bagisto v2.0.0 or higher
• Android Studio Meerkat | 2024.3.2
• Flutter Version - 3.38.9
• Dart - 3.10.8
• Xcode - 26.3
• Swift - 6.1

Make sure you have installed the API module and set this up properly on your bagisto.

NOTE: 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.

Installation Steps Copy Chapter

Clone the repository Copy Section

• 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

git clone https://github.com/bagisto/opensource-ecommerce-mobile-app.git

Install dependencies Copy Section

• Navigate to the project's directory

cd <repository-name>

• Run the following command to install the required packages

flutter pub get

Connect a device or emulator Copy Section

• Physical Device

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

• Emulator

  1. Start an Android or iOS emulator using your preferred IDE or tools.

Run the Project Copy Section

• Use the following command to build and run the project

flutter run

Minimum Versions Copy Chapter

• Android: 22
• iOS: 15.5

Configurations Steps Copy Chapter

For Setup Copy Section

Change the baseDomain as per your store

Go to lib/core/constants/api_constants.dart and configure the following:

/// Bagisto GraphQL endpoint (e.g., https://your-bagisto-server.com/graphql)
const String bagistoEndpoint = 'YOUR_BAGISTO_ENDPOINT_HERE';

/// Storefront key for Bagisto API
/// Get this from your Bagisto admin panel
const String storefrontKey = 'YOUR_STOREFRONT_KEY_HERE';

/// Company name (optional metadata)
const String companyName = 'Your Company Name';

For Theme Copy Section

In the AppColors class, find and modify the primary colors:

class AppColors {
  // Primary Colors - Modify these hex values to change the app's primary color
  static const Color primary500 = Color(0xFFFF6900);  // Main primary color
  static const Color primary600 = Color(0xFFF54900);  // Darker variant for pressed states
  // ...
}

To change the primary color:

• Replace 0xFFFF6900 with your desired color hex value
• Adjust primary600 to a slightly darker shade of your primary color

For Push Notification Service Copy Section

• Android

Replace "google-services.json".

• iOS

Replace "GoogleService-Info.plist".

Helpful Articles

Android → https://mobikul.com/knowledgebase/generating-google-service-file-enable-fcm-firebase-cloud-messaging-android-application/

iOS → https://mobikul.com/knowledgebase/generating-new-googleservice-info-plist-file-fcm-based-project-ios-app/

For Application Title Copy Section

• 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 Splash Screen Copy Section

• For adding an Image as a Splash Screen

  1. Path: assets/images/splash.png
  2. No additional constant update is required. The splash image is loaded directly in lib/features/splash/presentation/splash_screen.dart.

For App Icon Copy Section

• 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

Installation Video Copy Chapter

API Documentation Copy Chapter

For the API Documentation, please go through - https://api-docs.bagisto.com/api/graphql-api/introduction.html

Usage Copy Chapter

For detailed usage instructions, refer to the official documentation

Contributing Copy Chapter

Contributions are welcome! Follow the contribution guidelines to get started.

License Copy Chapter

Bagisto is open-sourced software licensed under the MIT license.

File: Docs/ColorSetUp.md Copy Chapter

Color Setup Guide

This document explains how to customize colors in the Bagisto Flutter app.

Color Architecture Copy Chapter

The app uses a centralized color system defined in lib/core/theme/app_theme.dart. All colors are defined in the AppColors class and are used throughout the application.

Steps to Customize Colors Copy Chapter

1. Locate the Theme File Copy Section

Navigate to:

lib/core/theme/app_theme.dart

2. Modify Primary Colors Copy Section

In the AppColors class, find and modify the primary colors:

class AppColors {
  // Primary Colors - Modify these hex values to change the app's primary color
  static const Color primary500 = Color(0xFFFF6900);  // Main primary color
  static const Color primary600 = Color(0xFFF54900);  // Darker variant for pressed states
  // ...
}

To change the primary color:

• Replace 0xFFFF6900 with your desired color hex value
• Adjust primary600 to a slightly darker shade of your primary color

3. Color Categories Available Copy Section

The app defines several color categories:

4. How Colors Are Used Copy Section

The colors are consumed in multiple ways:

Directly via AppColors class:

Container(
  color: AppColors.primary500,
  child: Text(
    'Hello',
    style: TextStyle(color: AppColors.neutral900),
  ),
)

Via ThemeData (Material 3):

ThemeData(
  colorScheme: const ColorScheme.light(
    primary: AppColors.primary500,
    secondary: AppColors.primary600,
  ),
)

Via TextStyles:

TextStyle(
  color: AppColors.primary500,
)

5. Dark Mode Support Copy Section

The app supports both light and dark themes. Colors automatically adjust based on the theme:

• Light theme uses: neutral50-neutral800 for backgrounds and text
• Dark theme uses: neutral800-neutral900 for backgrounds, neutral200 for text

6. Theme Switching Copy Section

To toggle between light and dark themes programmatically:

context.read().toggleTheme();

Or set a specific theme:

context.read().setLight();
context.read().setDark();

Color Hex Value Format Copy Chapter

Flutter uses the format 0xFF followed by 6 hexadecimal digits:

• 0xFF = Alpha channel (fully opaque)
• First 2 digits = Red
• Middle 2 digits = Green
• Last 2 digits = Blue

Examples:

• White: 0xFFFFFFFF
• Black: 0xFF000000
• Orange: 0xFFFF6900
• Blue: 0xFF155DFC

Best Practices Copy Chapter

1. Maintain contrast: Ensure text colors have sufficient contrast with backgrounds
2. Primary color consistency: Use primary500 for main actions and primary600 for pressed states
3. Semantic colors: Use status colors (successGreen) for feedback messages
4. Test both themes: Verify colors work well in both light and dark modes

File: Docs/ConfigGuide.md Copy Chapter

Configuration Guide

This guide explains how to configure the Bagisto Flutter app for your specific needs.

Table of Contents Copy Chapter

1. API Configuration
2. Theme & Color Configuration
3. Application Title
4. App Icons
5. Splash Screen
6. Permissions Configuration
7. Push Notifications (Firebase)
8. Language & Localization Configuration
9. GraphQL Configuration
10. Summary of Configuration Files

API Configuration Copy Chapter

Configure the Bagisto API endpoint and storefront key:

File: lib/core/constants/api_constants.dart

/// Bagisto API endpoint
const String bagistoEndpoint = 'https://your-bagisto-domain.com/graphql';

/// Storefront key for Bagisto API
const String storefrontKey = 'your_storefront_key';

/// Company name
const String companyName = 'Your Company Name';

Steps: Copy Section

1. Open lib/core/constants/api_constants.dart
2. Replace bagistoEndpoint with your Bagisto GraphQL endpoint
3. Replace storefrontKey with your storefront API key from Bagisto Admin
4. Update companyName to your company name

Theme & Color Configuration Copy Chapter

Customize the app's primary colors and theme:

File: lib/core/theme/app_theme.dart

Primary Colors Copy Section

In the AppColors class, modify the primary colors:

class AppColors {
  // Primary Colors
  static const Color primary500 = Color(0xFFFF6900);  // Main primary color (Orange)
  static const Color primary600 = Color(0xFFF54900);  // Darker variant for pressed states
  
  // Neutral Colors - Light Theme
  static const Color neutral50 = Color(0xFFFAFAFA);
  static const Color neutral100 = Color(0xFFF5F5F5);
  static const Color neutral200 = Color(0xFFE5E5E5);
  static const Color neutral300 = Color(0xFFD4D4D4);
  static const Color neutral400 = Color(0xFFA1A1A1);
  static const Color neutral500 = Color(0xFF737373);
  static const Color neutral600 = Color(0xFF525252);
  static const Color neutral700 = Color(0xFF404040);
  static const Color neutral800 = Color(0xFF262626);
  static const Color neutral900 = Color(0xFF171717);

  // Status Colors
  static const Color successGreen = Color(0xFF00A63E);
  static const Color success50 = Color(0xFFF0FDF4);
  static const Color success500 = Color(0xFF00C950);
  static const Color success700 = Color(0xFF008236);

  // Process / Info Colors
  static const Color process600 = Color(0xFF155DFC);
  static const Color process700 = Color(0xFF1447E6);

  // Static Colors
  static const Color white = Color(0xFFFFFFFF);
  static const Color black = Color(0xFF000000);
}

Theme Configuration Copy Section

The app supports both Light and Dark themes configured in the AppTheme class:

• Light Theme: Uses white backgrounds with neutral-900 text
• Dark Theme: Uses neutral-900 backgrounds with neutral-200 text

Both themes use Material3 design with Roboto font family.

For detailed color customization, see ColorSetUp.md.

Application Title Copy Chapter

Android Copy Section

File: android/app/src/main/AndroidManifest.xml

Find and modify the android:label attribute:

<application
    android:label="Your App Name"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher">

Current default: Mobikul Bagisto Laravel App

iOS Copy Section

File: ios/Runner/Info.plist

Find and modify the CFBundleDisplayName key:

<key>CFBundleDisplayName</key>
<string>Your App Name</string>

Current default: Mobikul Bagisto Laravel App

App Icons Copy Chapter

Android Copy Section

1. Open the android folder in Android Studio
2. Right-click on app → New → Image Asset
3. Set your custom icon image

Icon Location: android/app/src/main/res/mipmap-xxxhdpi/

iOS Copy Section

File: ios/Runner/Assets.xcassets/AppIcon.appiconset/

Replace the existing app icon images with your custom icons. Use Xcode's AppIcon template for proper sizing.

Splash Screen Copy Chapter

Android Copy Section

File: android/app/src/main/res/drawable-v21/launch_background.xml

Modify the splash background:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
</layer-list>

iOS Copy Section

File: ios/Runner/Assets.xcassets/LaunchImage.imageset/

Replace the following files with your custom splash image:

• LaunchImage.png (1x)
• [email protected] (2x)
• [email protected] (3x)

Also update ios/Runner/Assets.xcassets/splash.imageset/ for Flutter splash.

Permissions Configuration Copy Chapter

The app requires several permissions for full functionality:

Android Permissions Copy Section

File: android/app/src/main/AndroidManifest.xml

iOS Permissions Copy Section

File: ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to capture photos for image-based product search.</string>


<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access for voice search functionality.</string>


<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to your photo library to select images for product search.</string>
<key>NSPhotoLibraryAddOnlyUsageDescription</key>
<string>This app needs permission to save photos from your camera.</string>


<key>NSSpeechRecognitionUsageDescription</key>
<string>This app uses speech recognition for voice search.</string>

Push Notifications (Firebase) Copy Chapter

To enable Firebase Cloud Messaging (Push Notifications), replace the dummy configuration files:

Android Copy Section

File: android/app/google-services.json

Replace this file with your Firebase configuration file from the Firebase Console:

1. Go to Firebase Console → Project Settings → General
2. Click "Add App" → Android
3. Download google-services.json
4. Replace the existing file in android/app/

iOS Copy Section

File: ios/Runner/GoogleService-Info.plist

Replace this file with your Firebase configuration file:

1. Go to Firebase Console → Project Settings → General
2. Click "Add App" → iOS
3. Download GoogleService-Info.plist
4. Replace the existing file in ios/Runner/

Note: The current files contain dummy values and must be replaced with your actual Firebase project configuration for push notifications to work.

Language & Localization Configuration Copy Chapter

The app already includes Flutter localization support and a language selector backed by Bagisto locale data.

Current Supported Languages Copy Section

The current app build supports these locales:

• ar - Arabic
• de - German
• en - English
• es - Spanish
• fr - French
• it - Italian
• nl - Dutch
• ru - Russian
• tr - Turkish
• uk - Ukrainian

These locales are generated from the ARB files inside lib/l10n/.

Core Localization Files Copy Section

How It Works Copy Section

1. On app startup, ChannelBootstrapService fetches channel locales and the default locale from Bagisto.
2. The selected locale code is stored in shared preferences using LocaleCubit.
3. MaterialApp uses that locale together with AppLocalizations.delegate and AppLocalizations.supportedLocales.
4. When the user changes language from the account/settings UI, the app updates the locale, clears GraphQL cache, and reloads key screens.
5. Every GraphQL request includes the selected locale in the X-LOCALE header so Bagisto can return translated content.

Important Note Copy Section

The current implementation is built around simple language codes such as en, fr, and ar. If you want region-specific locale codes such as pt_BR or en_GB, you will need code changes in locale storage and comparison logic.

Add a New Language Copy Section

For the complete step-by-step guide to add a new language to the app, see LanguageConfiguration.md.

GraphQL Configuration Copy Chapter

The app uses GraphQL for API communication. The configuration is handled in:

File: lib/core/graphql/graphql_client.dart

Key Features: Copy Section

Client Types: Copy Section

1. Standard Client (GraphQLClientProvider.client) - For guest users
2. Authenticated Client (GraphQLClientProvider.authenticatedClient) - For logged-in users with Bearer token

Summary of Configuration Files Copy Chapter

Additional Resources Copy Chapter

• ColorSetUp.md - Detailed color customization guide
• LanguageConfiguration.md - Add or update app languages
• ServerConfig.md - Server-side configuration
• InstallationGuide.md - App installation instructions
• PlaceholderSetup.md - Placeholder image configuration

File: Docs/installationGuide.md Copy Chapter

Installation Guide:——

Scope : This document aims to provide assistance to new developers so that they can configure the application from the Raw Source Code.

Basic Requirements :

• Android Studio 4.1.1

• Raw Source Code ( extracted from Zip files)

• Internet Connection( so that android studio can download the needed packages)

• A Valid admin url of the Bagisto

Procedure to Follow

--------------------------------------- Android Studio Environment Set Up and Tests ---------------------------------------------------

• Firstly, you need to check if the Android Studio is properly installed and is in working state on your system.

  For checking you can create a sample new (Hello World) project and try running it on your device/emulator.

  If you find some problems here,then try searching on developer.android.com or stackoverflow.

• Secondly,you need to check that flutter is working in your system.

  For checking you can create sample new (Hello world)project in dart language and print it in console.

  If you find any issue you can refer the following links for solution.

Link:—

• Flutter Related Information [ https://pub.dev/ ]
• Android Studio & Environment[ https://developer.android.com/ ]

---------------------------------------------- Configuration Steps -------------------------------------------------------------------

• Download the code from git lab.you will get a Zip file of code in your downloads folder.UnZip the file.

• After this open the project in the android studio by choosing the Open an existing project option.Choose the Project by name and
  project will open in the android studio

• open the emulator or connect android studio with your real device and follow the steps to run the application.

• Now,your project is imported in the android Studio,You need to run few commands

• Run flutter clean.after this command you will get errors in your all dart files.Now run flutter pub get ,when you get 0 as exit code
  then all the errors of all dart files will vanish.

• Run the flutter run command and again you will face some errors,To remove the errors you need to generate autogenerated files of Retrofit.

  text Copy

  Run the following retrofit commands to remove the error.
   
  Command:—>flutter pub run build_runner build

• If command is not succeeded and you are still facing the issues,then run the another command of Retrofit.

  text Copy

  Command:—>flutter packages pub run build_runner build —delete-conflicting-outputs

• Now,you will found that all the issues are vanished away and now run the flutter run command

• When you can see the app is successfully installed in your device.

• you can set up the server url and other credentials as per the information in the “ServerConfiguration.dart" file.

-------------------------------------------to run the application for IOS platform-----------------------------------------------------

if you are running the application for ios then you must have mac system.
also you need to follow the given steps to run the application for IOs:--

• open terminal and run cd (ios folder path).
• Now run pod install command.
• Open the app in Xcode.
• Open .xcworkspace file.
• And run your project.

------------------------------------------------- Configuration Completed ------------------------------------------------------------

------------------------------------------------- END OF DOCUMENT -------------------------------------------------------------------

File: Docs/PlaceholderSetup.md Copy Chapter

Placeholder & Image Setup

This guide explains how to set up splash screens, logos, icons, and placeholders in the Bagisto Flutter app.

Asset Directory Structure Copy Chapter

The app's assets are stored in the assets/ folder:

assets/
├── images/
│   ├── splash.png          # Splash screen image
│   ├── bagisto_logo.svg    # Bagisto logo (SVG)
│   ├── apple_icon.svg      # Apple sign-in icon
│   ├── facebook_icon.svg   # Facebook sign-in icon
│   └── google_icon.svg     # Google sign-in icon
└── ml/
    └── (ML model files)

Splash Screen Copy Chapter

Image Location Copy Section

File: assets/images/splash.png

The splash screen is configured in:
File: lib/features/splash/presentation/splash_screen.dart

SplashScreen(
  backgroundColor: Colors.white,
  child: Image.asset(
    'assets/images/splash.png',
    width: double.infinity,
    height: double.infinity,
    fit: BoxFit.cover,
  ),
)

To Customize Splash Screen Copy Section

1. Replace assets/images/splash.png with your custom image
2. Recommended size: 1920x1080 pixels (or higher for high-DPI displays)
3. The splash displays for 3 seconds before navigating to the home screen

Android Splash Configuration Copy Section

File: android/app/src/main/res/drawable/launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
</layer-list>

iOS Splash Configuration Copy Section

File: ios/Runner/Base.lproj/LaunchScreen.storyboard

Modify the storyboard to customize the iOS launch screen.

App Icons (Launcher Icons) Copy Chapter

Android Copy Section

Location: android/app/src/main/res/

The Android adaptive icons are stored in various mipmap directories:

• mipmap-mdpi/
• mipmap-hdpi/
• mipmap-xhdpi/
• mipmap-xxhdpi/
• mipmap-xxxhdpi/

To change the app icon:

1. Use Android Studio's Image Asset tool:
   • Right-click on app → New → Image Asset
   • Select "Launcher Icons" as the icon type
   • Choose your custom icon image

iOS Copy Section

File: ios/Runner/Assets.xcassets/AppIcon.appiconset/

To change the app icon:

1. Replace the existing icon images in this folder with your custom icons
2. Ensure you provide all required sizes (20, 29, 40, 60, 76, 83.5 points @1x, @2x, @3x)

Logo & Social Login Icons Copy Chapter

The app includes SVG logos for branding and social login:

To Customize Logos Copy Section

1. Add your custom SVG or PNG files to assets/images/
2. Update the pubspec.yaml to include the new assets:

flutter:
  assets:
    - assets/images/
    - assets/ml/

3. Reference the image in your code:

Image.asset('assets/images/your-logo.png')
// or for SVG
SvgPicture.asset('assets/images/your-logo.svg')

Image Placeholders Copy Chapter

This app uses code-based placeholders rather than placeholder images. When images are loading, the app displays colored containers as placeholders.

Placeholder Colors Copy Section

Placeholders use theme-aware colors defined in lib/core/theme/app_theme.dart:

// Light mode placeholder
AppColors.neutral100  // Light gray background

// Dark mode placeholder
AppColors.neutral800  // Dark gray background

How Placeholders Work Copy Section

The app uses the cached_network_image package which provides a placeholder callback:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => Container(
    color: isDark ? AppColors.neutral800 : AppColors.neutral100,
  ),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

Widgets with Placeholders Copy Section

The following widgets implement placeholder support:

• Product cards (product_card_large.dart, product_card_small.dart)
• Category banners (category_banner.dart)
• Category images (category_chip_row.dart, sub_category_section.dart)
• Product images (product_image_carousel.dart, product_related_section.dart)
• Cart items (cart_page.dart)
• Home page widgets (static_content_widget.dart, category_carousel.dart)

Adding Custom Placeholder Images Copy Chapter

If you want to use custom placeholder images instead of code-based placeholders:

1. Add placeholder images to assets/images/:

   text Copy

   assets/images/placeholder.png

2. Use them in your widgets:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => Image.asset(
    'assets/images/placeholder.png',
    fit: BoxFit.cover,
  ),
)

Summary Copy Chapter

File: Docs/ServerConfig.md Copy Chapter

Server Configuration for Bagisto Flutter App

Overview Copy Chapter

The Bagisto Flutter app uses GraphQL for API communication. Server configuration is managed through constants and environment variables.

Configuration Steps Copy Chapter

1. Update API Constants Copy Section

Go to lib/core/constants/api_constants.dart and configure the following:

/// Bagisto GraphQL endpoint (e.g., https://your-bagisto-server.com/graphql)
const String bagistoEndpoint = 'YOUR_BAGISTO_ENDPOINT_HERE';

/// Storefront key for Bagisto API
/// Get this from your Bagisto admin panel
const String storefrontKey = 'YOUR_STOREFRONT_KEY_HERE';

/// Company name (optional metadata)
const String companyName = 'Your Company Name';

Configuration Details Copy Chapter

`bagistoEndpoint` Copy Section

• Type: String (URL)
• Example: https://bagisto.yourdomain.com/graphql
• Purpose: GraphQL endpoint URL for all API calls
• Required: Yes

`storefrontKey` Copy Section

• Type: String
• Purpose: API key for identifying your storefront in Bagisto
• Location in Bagisto: Admin Panel → Settings → Channels
• Required: Yes

GraphQL Client Configuration Copy Chapter

The GraphQL client is configured in lib/core/graphql/graphql_client.dart with:

• HTTP Client: Custom TimeoutHttpClient with 30-second timeout for both connection and receive
• Headers:
  • Content-Type: application/json
  • X-STOREFRONT-KEY: {storefrontKey}
• Logging: Detailed request/response logging in debug mode
• Caching: HiveStore for offline data persistence

Network Configuration Copy Chapter

Timeouts Copy Section

• Connection Timeout: 30 seconds
• Receive Timeout: 30 seconds

Cache Management Copy Section

The app uses HiveStore for caching GraphQL responses. To clear cache on logout:

await GraphQLClientProvider.clearCache();

Testing Configuration Copy Chapter

Before deploying to production:

1. Verify your Bagisto endpoint is accessible
2. Confirm the storefront key is valid in Bagisto admin
3. Test API connectivity from your development environment
4. Check network logs in Flutter DevTools for request/response details

File: ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md Copy Chapter

Launch Screen Assets

You can customize the launch screen with your own desired assets by replacing the image files in this directory.

You can also do it by opening your Flutter project's Xcode project with open ios/Runner.xcworkspace, selecting Runner/Assets.xcassets in the Project Navigator and dropping in the desired images.