shopify_app_bridge_flutter

A Flutter Web package that seamlessly wraps the Shopify App Bridge JS SDK. This enables your Flutter applications to run inside the Shopify Admin as embedded apps with access to native UI components and deep integration.

Shopify App Bridge Demo

Features

  • 🔐 Native Authentication: Securely fetch Shopify session tokens (JWT) directly from the App Bridge.
  • 🍞 Toast Notifications: Display native Shopify notification toasts (success and error states).
  • 🧭 Seamless Navigation: Redirect to native Shopify Admin sections (Products, Orders, Customers, etc.) or external URLs without breaking the iframe.
  • 🏗️ Native UI Components:
    • Title Bar: Dynamically update the Shopify Admin header title.
    • Modals: Trigger native Shopify modal dialogs.
    • Loading State: Control the Shopify Admin global loading indicator.
  • 🚀 Hybrid Compatibility: Supports both the New App Bridge (v4+) and reliable fallback for Action-based APIs.

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  shopify_app_bridge_flutter: ^0.1.0

Setup (Flutter Web)

To bridge Flutter with Shopify, you must include the App Bridge CDN and the interop helper in your web/index.html.

  1. Add the following scripts to the <head> of your web/index.html:
<!-- Shopify App Bridge CDN -->
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

<!-- The Package Interop Helper (Copy this from the package's /web folder) -->
<script src="shopify_bridge_interop.js"></script>
  1. Note: Copy shopify_bridge_interop.js from the package's web/ directory into your project's web/ directory.

Usage

Initialization

Initialize the bridge in your main() function:

import 'package:shopify_app_bridge_flutter/shopify_app_bridge_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await ShopifyAppBridge.init(
    apiKey: 'your_api_key_here',
    host: ShopifyHostHelper.hostFromUrl(), // Automatically detects host from URL
  );

  runApp(const MyApp());
}

Authentication / Session Tokens

final token = await ShopifyAuth.getSessionToken();
print('Shopify JWT: $token');

Native Toasts

ShopifyToast.success('Product updated!');
ShopifyToast.error('Failed to save changes.');

UI Components

// Update Title Bar
ShopifyTitleBar.set('My Awesome App');

// Native Modal
ShopifyModal.show('Confirm', 'Are you sure you want to proceed?');

// Loading Indicator
ShopifyLoading.start();
await Future.delayed(Duration(seconds: 2));
ShopifyLoading.stop();

ShopifyRedirect.toProducts();
ShopifyRedirect.toOrders();
ShopifyRedirect.toAdminPath('/settings');

Additional Information

Building Shopify apps with Flutter is powerful! This package handles the complex JS interop layer so you can focus on building your features.

Libraries

shopify_app_bridge_flutter
Flutter Web package for integrating with the Shopify App Bridge JS SDK.