# Flutter quickstart

> The tryyoursize plugin over the native SDKs. The Size guide button and the shopper's recommended size.

Source: https://docs.tryyoursize.com/quickstarts/flutter/

> **For your developer**
>
> **What it does:** Adds the native TryYourSize 'Size guide' button and the shopper's recommended size to our Flutter app. The app receives sizes only.
>
> **Time needed:** About a day.
>
> **What to send them:** The test publishable key (pk_test_…) and our iOS bundle ID and Android package to register.

A thin plugin over the native [iOS](https://docs.tryyoursize.com/quickstarts/ios.md) and [Android](https://docs.tryyoursize.com/quickstarts/android.md) SDKs. The measuring and 3D try-on window is our web window, opened by the native SDK (a sheet on iOS, full screen on Android).

> **Caution: Preview**
>
> The Flutter plugin is in preview: it has not been through our build and device tests yet. The native SDKs it wraps are tested. App origins work in test mode only for now; pub.dev publication is coming soon.

## Install

```yaml
# pubspec.yaml
dependencies:
  tryyoursize: ^0.1.0   # from the source we share during the pilot
```

- **iOS** (16+): the plugin depends on the `TryYourSize` pod (CocoaPods; `platform :ios, '16.0'`).
- **Android** (minSdk 24): the plugin depends on `com.tryyoursize:tryyoursize-android`. The window needs an androidx `ComponentActivity`, so `MainActivity` must extend **`FlutterFragmentActivity`**:

```kotlin
class MainActivity : io.flutter.embedding.android.FlutterFragmentActivity()
```

## Register your app

In Studio, for test mode, add `ios-app://<your bundle id>` and `android-app://<your package>` (lower case).

## Use

```dart
final tys = await TryYourSize.create(
  'pk_test_…',
  appearance: const Appearance(borderRadius: 10),   // default theme: inherit your app's colours
);

// The button, where your "Size guide" link was. A tap opens the window.
const SizeGuide(product: 'SKU-123');                 // or variant: SizeGuideVariant.button

// Preselect the recommended size, but never override the shopper's own choice.
tys.onRecommendation('SKU-123').listen((rec) {
  if (rec.status == RecommendationStatus.ready && !touched) select(rec.size!);
});

// The shopper picked a size in the window.
tys.events.listen((e) {
  if (e is SizeSelected) select(e.selection.size);
});

// Without the button:
final rec = await tys.recommendation('SKU-123');
await tys.present('SKU-123');
```

| `Recommendation` | |
|---|---|
| `status` | `ready`, `computing`, `noSize` (simulated, no size is wearable), `signedOut`, `unavailable` (no size for this product yet) |
| `size` | The recommended size in **your** label, or null |
| `studioSize` | The same size as entered in Studio |
| `wearableSizes` | Sizes this body can wear, in your labels |

Errors are `TryYourSizeException` with a stable `code`: `secret_key_in_app`, `invalid_key`, `invalid_app_identifier`, `app_not_allowed`, `window_unreachable`.

**Appearance:** `theme` (`inherit` or `tryyoursize`, our light beige brand), `colorPrimary`, `colorBackground`, `colorText`, `fontFamily`, `borderRadius` (0–32) and `fonts` (Google Fonts stylesheet URLs). `tys.setAppearance(...)` restyles live, for example when your app switches to dark mode.