shopify_app_bridge_flutter 0.1.0 
shopify_app_bridge_flutter: ^0.1.0 copied to clipboard
A Flutter Web package that wraps the Shopify App Bridge JS SDK, enabling Flutter apps to run inside Shopify Admin as embedded apps.
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.
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.
- Add the following scripts to the
<head>of yourweb/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>
- Note: Copy
shopify_bridge_interop.jsfrom the package'sweb/directory into your project'sweb/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();
Navigation #
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.
- Issues: Report bugs at our GitHub Repository.
- Contribution: PRs are welcome!
Metadata
Documentation
Publisher
unverified uploader
Weekly Downloads
Metadata
A Flutter Web package that wraps the Shopify App Bridge JS SDK, enabling Flutter apps to run inside Shopify Admin as embedded apps.
Repository (GitHub)
View/report issues
License
MIT (license)
