Flutter Shopify店铺管理插件shopify_sheet的使用

功能

Shopify Sheet Flutter插件是一个强大的工具，可以将Shopify Checkout Sheet SDK无缝集成到您的Flutter应用中。该插件提供了简洁的API来启动Shopify Checkout Sheet，并处理完成、取消和错误等事件。

主要功能

• 在Flutter应用中启动Shopify Checkout Sheet。
• 使用结构化的枚举处理完成、取消和失败等事件。
• 全面兼容Flutter的现代嵌入（v2）。

开始使用

1. 安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  shopify_sheet: ^0.0.2

然后运行以下命令以获取包：

flutter pub get

2. Android配置

2.1 更新MainActivity

为了支持Shopify Checkout Sheet，您的应用的MainActivity必须继承自FlutterFragmentActivity而不是FlutterActivity。

更新您的MainActivity：

路径: android/app/src/main/kotlin/<your-package-name>/MainActivity.kt

package <your-package-name>

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity : FlutterFragmentActivity() {
    // 不需要额外的代码
}

2.2 更新AndroidManifest.xml

确保您的AndroidManifest.xml文件引用了更新后的MainActivity。

路径: android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="<your-package-name>">

    <application
        android:label="your_app"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/NormalTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

2.3 更新build.gradle

应用级build.gradle

在您的应用级build.gradle文件的dependencies块中添加以下依赖项：

路径: android/app/build.gradle

dependencies {
    implementation "androidx.activity:activity:1.7.2" // 对于ComponentActivity兼容性
    implementation "androidx.fragment:fragment:1.5.7" // 支持片段（由FlutterFragmentActivity内部使用）
    implementation "com.google.android.material:material:1.9.0" // 如果需要，Material组件
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1" // 事件处理生命周期
}

2.4 最低SDK版本

确保您的build.gradle文件中的minSdkVersion至少为23：

android {
    defaultConfig {
        minSdkVersion 23
    }
}

3. iOS配置

确保项目的依赖版本大于或等于13.0。

4. 使用

4.1 启动Shopify Checkout

以下是启动Shopify Checkout Sheet并监听事件的方法：

import 'package:shopify_sheet/shopify_sheet.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShopifyCheckoutDemo(),
    );
  }
}

class ShopifyCheckoutDemo extends StatefulWidget {
  [@override](/user/override)
  State<ShopifyCheckoutDemo> createState() => _ShopifyCheckoutDemoState();
}

class _ShopifyCheckoutDemoState extends State<ShopifyCheckoutDemo> {
  final ShopifySheet _shopifySheet = ShopifySheet();

  [@override](/user/override)
  void initState() {
    super.initState();

    // 监听checkout事件
    _shopifySheet.checkoutEvents.listen((event) {
      switch (event.type) {
        case ShopifySheetEventType.completed:
          print("Checkout Completed");
          break;
        case ShopifySheetEventType.canceled:
          print("Checkout Canceled");
          break;
        case ShopifySheetEventType.failed:
          print("Checkout Failed: ${event.error}");
          break;
        case ShopifySheetEventType.pixelEvent:
          print("Pixel Event: ${event.data}");
          break;
        case ShopifySheetEventType.unknown:
        default:
          print("Unknown Event");
      }
    });
  }

  void _launchCheckout() {
    _shopifySheet.launchCheckout(
      "https://your-shopify-store.myshopify.com/cart/c/valid-key"
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Shopify Checkout Plugin")),
      body: Center(
        child: ElevatedButton(
          onPressed: _launchCheckout,
          child: const Text("Launch Checkout"),
        ),
      ),
    );
  }
}