--- title: "Flutter SDK で Flow Builder を使って購入を有効にする" description: "Adapty Flow Builder を使ったアプリ内課金の有効化に関するクイックスタートガイド。" --- アプリ内課金を有効にするには、次の3つの重要な概念を理解する必要があります。 - [**プロダクト**](product) – ユーザーが購入できるもの（サブスクリプション、消耗型アイテム、永続アクセス） - [**フロー**](adapty-flow-builder) – ノーコードのフロービルダーで作成した、プロダクトをユーザーに提示するための画面シーケンス。SDK では `getFlow` で取得します。自前のコードで UI を構築したい場合は、ペイウォールをご利用ください — [ペイウォールを手動で実装する](flutter-quickstart-manual)をご覧ください。 - [**プレースメント**](placements) – アプリ内でフローを表示する場所とタイミング（`main`、`onboarding`、`settings` など）。ダッシュボードでフローをプレースメントに紐付け、コード内ではプレースメント ID で取得します。これにより、A/B テストの実施やユーザーごとに異なるフローの表示が簡単に行えます。 Adaptyでは、アプリ内課金を有効にする方法を3つ提供しています。アプリの要件に応じていずれかを選択してください： | 実装方法 | 複雑さ | 使用タイミング | |------------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Adapty Flow Builder | ✅ 簡単 | [ノーコードビルダーで購入可能な完全なフローを作成](quickstart-paywalls)します。Adapty が自動的にレンダリングし、複雑な購入フロー、レシート検証、サブスクリプション管理をすべて裏側で処理します。 | | 手動で作成したペイウォール | 🟡 中程度 | アプリのコードでペイウォール UI を実装しつつ、プロダクトラインナップの柔軟性を維持するために Adapty からフローオブジェクトを取得します。[ガイド](flutter-quickstart-manual)を参照してください。 | | オブザーバーモード | 🔴 難しい | 独自の購入処理基盤がすでにあり、そのまま使い続けたい場合に使用します。なお、オブザーバーモードには Adapty での制限があります。[記事](observer-vs-full-mode)を参照してください。 | :::important **以下の手順では、Adapty Flow Builder で作成したフローの実装方法を説明します。** ペイウォールのUIを独自に構築したい場合は、[ペイウォールを手動で実装する](flutter-quickstart-manual)をご覧ください。 ::: Adapty Flow Builder で作成したフローをアプリに表示するには、以下の3つだけ行えばOKです。 1. **フローを取得する**: Adapty からフローを取得します。 2. **表示する（購入処理はAdaptyが自動で行います）**: アプリにビューを表示します。 3. **ボタン操作を処理する**: ユーザーのタップ操作に対するアプリの反応を定義します。たとえば、リンクを開いたり、ボタンがタップされたときにフローを閉じたりします。 ## 始める前に \{#before-you-start\} 始める前に、以下の手順を完了してください： 1. Adapty ダッシュボードでアプリを [App Store](initial_ios) および/または [Google Play](initial-android) に接続する。 2. Adapty で[プロダクトを作成する](create-product)。 3. [フローを作成してプロダクトを追加する](create-paywall)。 4. [プレースメントを作成してフローを追加する](create-placement)。 5. アプリのコードに [Adapty SDK をインストールして有効化する](sdk-installation-flutter)。このガイドでは Adapty Flutter SDK v4 の API を使用します。 :::tip これらのステップを最も素早く完了するには、[クイックスタートガイド](quickstart)に従うか、[Developer CLI](developer-cli-quickstart)を使用してペイウォールとプレースメントを作成してください。 ::: ## 1. フローを取得する \{#1-get-the-flow\} フローはダッシュボードで設定したプレースメントに紐付けられています。プレースメントを使うと、オーディエンスごとに異なるフローを表示したり、[A/B テスト](ab-tests)を実施したりできます。 Adapty フロービルダーで作成したフローを取得するには、次の手順を行います。 1. `getFlow` メソッドを使って[プレースメント](placements) ID から `flow` オブジェクトを取得し、`hasViewConfiguration` プロパティを確認してビルダーで作成されたフローかどうかを判別します。 2. `createFlowView` メソッドを使ってフロービューを作成します。ビューにはフローを表示するために必要な UI 要素とスタイル情報が含まれています。 :::important ビュー設定を取得するには、ビルダーで **Show on device** トグルをオンにする必要があります。オンにしていない場合、ビュー設定が空になり、フローが表示されません。 ::: ```dart showLineNumbers 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. フローを表示する \{#display-the-flow\} フローのビューが用意できたら、あとは数行追加するだけで表示できます。 フローを表示するには、`createFlowView` メソッドで作成した `view` に対して `view.present()` メソッドを呼び出します。各 `view` は一度しか表示できません。閉じた後はメモリから解放されます。再度フローを表示する必要がある場合は、`createFlowView` をもう一度呼び出して新しい `view` インスタンスを作成してください。 ```dart showLineNumbers title="Flutter" try { await view.present(); } on AdaptyError catch (e) { // handle the error } catch (e) { // handle the error } ``` :::tip フローの表示方法の詳細については、[ガイド](flutter-present-paywalls)を参照してください。 ::: ## 3. ボタンアクションの処理 \{#handle-button-actions\} ユーザーがフロー内のボタンをクリックすると、Flutter SDK は購入・復元・画面を閉じる・URL を開くなどの操作を自動的に処理します。ただし、カスタムまたは事前定義された ID を持つボタンについては、コード側でアクションを処理する必要があります。 フロー画面上のプロセスを制御・監視するには、`AdaptyUIFlowsEventsObserver` のメソッドを実装し、画面を表示する前にオブザーバーを設定してください。ユーザーが何らかのアクションを実行すると `flowViewDidPerformAction` が呼び出されるので、アクション ID に応じてアプリが適切に応答する必要があります。 3つのオブザーバーメソッドが**必須**です：`flowViewDidFinishPurchase`、`flowViewDidFinishRestore`、`flowViewDidReceiveError` — これらがないとクラスはコンパイルエラーになります。 :::tip ボタンの[アクション](flutter-handle-paywall-actions)と[イベント](flutter-handling-events)の処理方法については、ガイドをご覧ください。 ::: ウィジェットではなく、専用の長命なオブジェクトとしてオブザーバーを実装してください。アプリ全体で1つのグローバルなオブザーバースロットが共有されるため、`State` にバインドするとその画面がリークし（SDKが強参照を保持するため）、次の画面が登録された時点でサイレントに上書きされてしまいます。`extends` を使うことでSDKのデフォルト動作も継承されるため、必須の3つのメソッドに加え、必要なコールバックだけをオーバーライドすれば十分です。 ```dart showLineNumbers title="Flutter" // 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(); } } ``` ハンドラーは、フローが表示される前のアプリ起動時に **一度だけ** 登録してください： ```dart showLineNumbers title="Flutter" AdaptyUI().setFlowsEventsObserver(FlowEventsHandler()); ``` ## 次のステップ \{#next-steps\} :::tip ご質問やお困りのことがあれば、[サポートフォーラム](https://adapty.featurebase.app/)をご覧ください。よくある質問への回答を見つけたり、ご自身の質問を投稿することができます。チームとコミュニティがサポートいたします！ ::: ペイウォールはアプリに表示する準備が整いました。[App Store サンドボックス](test-purchases-in-sandbox)または[Google Play Store](testing-on-android)でテスト購入を試して、ペイウォールからテスト購入が完了できることを確認してください。 次に、[ユーザーのアクセスレベルを確認](flutter-check-subscription-status)して、適切なユーザーにペイウォールを表示したり有料機能へのアクセスを付与したりできるようにする必要があります。 ## 完全なコード例 \{#full-example\} 以下に、これらのすべてのステップをアプリに統合した場合の完全なサンプルコードを示します。 ```dart 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 createState() => _FlowScreenState(); } class _FlowScreenState extends State { @override void initState() { super.initState(); _showFlowIfNeeded(); } Future _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'), ), ), ); } } ```