---
title: "Flutter demo"
description: "Explore a Flutter storefront built with the Inttegro Flutter SDK."
canonical: "https://studio.inttegro.com/demos/flutter"
format: inttegro-machine-docs/v1
language: "TypeScript"
sdk_version: "v12.0.0"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/typescript/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 372
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "general"
recommended_mcp_tools: []
estimated_tokens: 1014
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Explore a Flutter storefront built with the Inttegro Flutter SDK. This TypeScript representation uses the selected SDK's native names wherever Studio has a verified mapping.

### Five questions

#### Q1. When should the reader use Flutter demo?

Use this demo guide to inspect a complete working integration and compare it with the application being built.

#### Q2. What is authoritative on this page?

The demo proves one working composition, not the only supported architecture. Follow its linked SDK and API pages for current contracts.

#### Q3. What page-specific constraint matters most?

Do not copy demo credentials, identifiers, or deployment assumptions. Recreate configuration through supported public setup paths.

#### Q4. Can Inttegro MCP materially help with this task?

No catalog ability is sufficiently specific to recommend for this page. Use the documentation directly; consult the MCP catalog only if the task later requires governed live account context or a supported operation.

#### Q5. How should the reader verify the answer and continue?

Open the hosted experience, trace the corresponding source, and verify that its SDK and API usage still matches the current linked documentation. Continue with [Set up the Next.js demo backend](https://studio.inttegro.com/machine/typescript/demos/nextjs.md) and [Inttegro Flutter SDK](https://studio.inttegro.com/machine/typescript/mobile/flutter.md) when those concerns enter scope.

## Document content

# Flutter demo

Build a Flutter storefront that opens Inttegro’s native payment sheet. The app
receives an order ID from your backend.

> Demo Release is interactive content. Use the canonical page to view it.

## See the flow

Compare the payment-ready and completed states on iOS and Android.

> Mobile Sdk Screenshots is interactive content. Use the canonical page to view it.

## What you’ll build

- A [Flutter](https://docs.flutter.dev/install) Material 3 product experience
- Native payment-sheet presentation through the [Inttegro Flutter SDK](https://studio.inttegro.com/machine/typescript/mobile/flutter.md)
- A backend-owned order and credential boundary
- Lifecycle events cleaned up on dispose

## Run the demo

Install Flutter, generate the Android and iOS projects, fetch packages, and set
the backend URL. The
[released README](https://github.com/inttegro/inttegro-demos/blob/flutter-v1.8.3/flutter/README.md)
has the exact commands.

## Key files

1. [`lib/demo_backend.dart`](https://github.com/inttegro/inttegro-demos/blob/flutter-v1.8.3/flutter/lib/demo_backend.dart)
   requests the order ID from your backend.
2. [`lib/main.dart`](https://github.com/inttegro/inttegro-demos/blob/flutter-v1.8.3/flutter/lib/main.dart)
   presents the payment sheet and handles the result.

## Before you ship

Keep the customer, product, amount, currency, and API key on the server. Return
only the order ID to the app and verify payment before fulfillment.

## Next

- [Browse the released source](https://github.com/inttegro/inttegro-demos/tree/flutter-v1.8.3/flutter)
- [Set up the Next.js demo backend](https://studio.inttegro.com/machine/typescript/demos/nextjs.md)
- [Read the Flutter SDK guide](https://studio.inttegro.com/machine/typescript/mobile/flutter.md)