Flutter SDK で Flow Builder を使って購入を有効にする

アプリ内課金を有効にするには、次の3つの重要な概念を理解する必要があります。

プロダクト – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス）
フロー – ノーコードのフロービルダーで作成した、プロダクトをユーザーに提示するための画面シーケンス。SDK では getFlow で取得します。自前のコードで UI を構築したい場合は、ペイウォールをご利用ください — ペイウォールを手動で実装するをご覧ください。
プレースメント – アプリ内でフローを表示する場所とタイミング（main、onboarding、settings など）。ダッシュボードでフローをプレースメントに紐付け、コード内ではプレースメント ID で取得します。これにより、A/B テストの実施やユーザーごとに異なるフローの表示が簡単に行えます。 Adaptyでは、アプリ内課金を有効にする方法を3つ提供しています。アプリの要件に応じていずれかを選択してください： | 実装方法 | 複雑さ | 使用タイミング | |------------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Adapty Flow Builder | ✅ 簡単 | ノーコードビルダーで購入可能な完全なフローを作成します。Adapty が自動的にレンダリングし、複雑な購入フロー、レシート検証、サブスクリプション管理をすべて裏側で処理します。 | | 手動で作成したペイウォール | 🟡 中程度 | アプリのコードでペイウォール UI を実装しつつ、プロダクトラインナップの柔軟性を維持するために Adapty からフローオブジェクトを取得します。ガイドを参照してください。 | | オブザーバーモード | 🔴 難しい | 独自の購入処理基盤がすでにあり、そのまま使い続けたい場合に使用します。なお、オブザーバーモードには Adapty での制限があります。記事を参照してください。 |

以下の手順では、Adapty Flow Builder で作成したフローの実装方法を説明します。

ペイウォールのUIを独自に構築したい場合は、ペイウォールを手動で実装するをご覧ください。

Adapty Flow Builder で作成したフローをアプリに表示するには、以下の3つだけ行えばOKです。

フローを取得する: Adapty からフローを取得します。
表示する（購入処理はAdaptyが自動で行います）: アプリにビューを表示します。
ボタン操作を処理する: ユーザーのタップ操作に対するアプリの反応を定義します。たとえば、リンクを開いたり、ボタンがタップされたときにフローを閉じたりします。

始める前に

始める前に、以下の手順を完了してください：

Adapty ダッシュボードでアプリを App Store および/または Google Play に接続する。
Adapty でプロダクトを作成する。
フローを作成してプロダクトを追加する。
プレースメントを作成してフローを追加する。
アプリのコードに Adapty SDK をインストールして有効化する。このガイドでは Adapty Flutter SDK v4 の API を使用します。

これらのステップを最も素早く完了するには、クイックスタートガイドに従うか、Developer CLIを使用してペイウォールとプレースメントを作成してください。

1. フローを取得する

フローはダッシュボードで設定したプレースメントに紐付けられています。プレースメントを使うと、オーディエンスごとに異なるフローを表示したり、A/B テストを実施したりできます。

Adapty フロービルダーで作成したフローを取得するには、次の手順を行います。

getFlow メソッドを使ってプレースメント ID から flow オブジェクトを取得し、hasViewConfiguration プロパティを確認してビルダーで作成されたフローかどうかを判別します。
createFlowView メソッドを使ってフロービューを作成します。ビューにはフローを表示するために必要な UI 要素とスタイル情報が含まれています。

ビュー設定を取得するには、ビルダーで Show on device トグルをオンにする必要があります。オンにしていない場合、ビュー設定が空になり、フローが表示されません。


try {
  // the requested flow
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');
  final view = await AdaptyUI().createFlowView(
    flow: flow,
  );
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

2. フローを表示する

フローのビューが用意できたら、あとは数行追加するだけで表示できます。

フローを表示するには、createFlowView メソッドで作成した view に対して view.present() メソッドを呼び出します。各 view は一度しか表示できません。閉じた後はメモリから解放されます。再度フローを表示する必要がある場合は、createFlowView をもう一度呼び出して新しい view インスタンスを作成してください。

try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

フローの表示方法の詳細については、ガイドを参照してください。

3. ボタンアクションの処理

ユーザーがフロー内のボタンをクリックすると、Flutter SDK は購入・復元・画面を閉じる・URL を開くなどの操作を自動的に処理します。ただし、カスタムまたは事前定義された ID を持つボタンについては、コード側でアクションを処理する必要があります。

フロー画面上のプロセスを制御・監視するには、AdaptyUIFlowsEventsObserver のメソッドを実装し、画面を表示する前にオブザーバーを設定してください。ユーザーが何らかのアクションを実行すると flowViewDidPerformAction が呼び出されるので、アクション ID に応じてアプリが適切に応答する必要があります。 3つのオブザーバーメソッドが必須です：flowViewDidFinishPurchase、flowViewDidFinishRestore、flowViewDidReceiveError — これらがないとクラスはコンパイルエラーになります。

ボタンのアクションとイベントの処理方法については、ガイドをご覧ください。

ウィジェットではなく、専用の長命なオブジェクトとしてオブザーバーを実装してください。アプリ全体で1つのグローバルなオブザーバースロットが共有されるため、State にバインドするとその画面がリークし（SDKが強参照を保持するため）、次の画面が登録された時点でサイレントに上書きされてしまいます。extends を使うことでSDKのデフォルト動作も継承されるため、必須の3つのメソッドに加え、必要なコールバックだけをオーバーライドすれば十分です。

// A dedicated, long-lived handler for flow events.
// It does NOT live inside a Widget/State, so it never leaks and is never
// silently replaced when screens�� are pushed or popped.
class FlowEventsHandler extends AdaptyUIFlowsEventsObserver {
  // A single, app-wide instance — same idiom as Adapty() and AdaptyUI().
  static final FlowEventsHandler _instance = FlowEventsHandler._();
  factory FlowEventsHandler() => _instance;
  FlowEventsHandler._();

  // This method is called when user performs an action on the flow UI.
  // Overriding it replaces the default behavior (dismiss on close, open URLs),
  // so keep those cases if you want to preserve it.
  @override
  void flowViewDidPerformAction(AdaptyUIFlowView view, AdaptyUIAction action) {
    switch (action) {
      case const CloseAction():
      case const AndroidSystemBackAction(): // close the flow on the Android back button
        view.dismiss();
        break;
      case OpenUrlAction(:final url, :final openIn):
        AdaptyUI().openUrl(url, openIn: openIn);
        break;
      default:
        break;
    }
  }

  // Required: decide what happens after a purchase finishes
  @override
  void flowViewDidFinishPurchase(AdaptyUIFlowView view,
      AdaptyPaywallProduct product, AdaptyPurchaseResult purchaseResult) {
    if (purchaseResult is! AdaptyPurchaseResultUserCancelled) {
      view.dismiss();
    }
  }

  // Required: dismiss the flow once a restore succeeds
  @override
  void flowViewDidFinishRestore(AdaptyUIFlowView view, AdaptyProfile profile) {
    view.dismiss();
  }

  // Required: handle rendering and other view errors
  @override
  void flowViewDidReceiveError(AdaptyUIFlowView view, AdaptyError error) {
    print('Flow error: $error');
    view.dismiss();
  }
}

ハンドラーは、フローが表示される前のアプリ起動時に 一度だけ 登録してください：

AdaptyUI().setFlowsEventsObserver(FlowEventsHandler());

次のステップ

ご質問やお困りのことがあれば、サポートフォーラムをご覧ください。よくある質問への回答を見つけたり、ご自身の質問を投稿することができます。チームとコミュニティがサポートいたします！

ペイウォールはアプリに表示する準備が整いました。App Store サンドボックスまたはGoogle Play Storeでテスト購入を試して、ペイウォールからテスト購入が完了できることを確認してください。

次に、ユーザーのアクセスレベルを確認して、適切なユーザーにペイウォールを表示したり有料機能へのアクセスを付与したりできるようにする必要があります。

完全なコード例

以下に、これらのすべてのステップをアプリに統合した場合の完全なサンプルコードを示します。


void main() {
  // Register a single, long-lived observer once, before any flow is shown.
  // It is intentionally a plain object (NOT a Widget/State): its lifetime is the
  // whole app, so it never leaks and is never silently replaced when screens are
  // pushed or popped.
  AdaptyUI().setFlowsEventsObserver(FlowEventsHandler());

  runApp(MaterialApp(home: FlowScreen()));
}

/// A dedicated handler for AdaptyUI flow events.
///
/// It `extends` [AdaptyUIFlowsEventsObserver] (rather than being implemented
/// by a `State`), which gives you two things for free:
///   * the SDK's sensible defaults for optional callbacks, so besides the three
///     required methods you only override what you actually care about;
///   * a lifecycle that is independent of the widget tree — there is no strong
///     reference back into a `Widget`, so nothing leaks and there is nothing to
///     unregister.
///
/// Every callback receives the [AdaptyUIFlowView] it relates to, so handling
/// flow actions never requires a `BuildContext` or widget state.
class FlowEventsHandler extends AdaptyUIFlowsEventsObserver {
  // A single, app-wide instance — same idiom as Adapty() and AdaptyUI().
  static final FlowEventsHandler _instance = FlowEventsHandler._();
  factory FlowEventsHandler() => _instance;
  FlowEventsHandler._();

  // Called when the user performs an action on the flow UI.
  @override
  void flowViewDidPerformAction(AdaptyUIFlowView view, AdaptyUIAction action) {
    switch (action) {
      case const CloseAction():
      case const AndroidSystemBackAction(): // close the flow on the Android back button
        view.dismiss();
        break;
      case OpenUrlAction(:final url, :final openIn):
        // Open the URL natively, honoring the dashboard browser setting.
        AdaptyUI().openUrl(url, openIn: openIn);
        break;
      default:
        break;
    }
  }

  // Required: decide what happens after a purchase finishes.
  @override
  void flowViewDidFinishPurchase(AdaptyUIFlowView view,
      AdaptyPaywallProduct product, AdaptyPurchaseResult purchaseResult) {
    if (purchaseResult is! AdaptyPurchaseResultUserCancelled) {
      view.dismiss();
    }
  }

  // Required: dismiss the flow once a restore succeeds.
  @override
  void flowViewDidFinishRestore(AdaptyUIFlowView view, AdaptyProfile profile) {
    view.dismiss();
  }

  // Required: handle rendering and other view errors.
  @override
  void flowViewDidReceiveError(AdaptyUIFlowView view, AdaptyError error) {
    print('Flow error: $error');
    view.dismiss();
  }
}

class FlowScreen extends StatefulWidget {
  const FlowScreen({super.key});

  @override
  State<FlowScreen> createState() => _FlowScreenState();
}

class _FlowScreenState extends State<FlowScreen> {
  @override
  void initState() {
    super.initState();
    _showFlowIfNeeded();
  }

  Future<void> _showFlowIfNeeded() async {
    try {
      final flow = await Adapty().getFlow(
        placementId: 'YOUR_PLACEMENT_ID',
      );

      if (!flow.hasViewConfiguration) return;

      final view = await AdaptyUI().createFlowView(flow: flow);

      await view.present();
    } catch (_) {
      // Handle any errors (network, SDK issues, etc.)
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Adapty Flow Example')),
      body: Center(
        // Add a button to re-trigger the flow for testing purposes.
        child: ElevatedButton(
          onPressed: _showFlowIfNeeded,
          child: const Text('Show Flow'),
        ),
      ),
    );
  }
}