# TryYourSize Flutter SDK reference

---

# Flutter reference (package:tryyoursize)

> The native Size guide button and the shopper's recommended size in Flutter, over the iOS and Android SDKs.

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

*SDK* · `tryyoursize (Dart)` · v0.1.0

Flutter 3.19+ (Dart 3.3+). The button is a native platform view and the window is our window in a native sheet, from the [iOS](https://docs.tryyoursize.com/reference/ios.md) and [Android](https://docs.tryyoursize.com/reference/android.md) SDKs. On Android your `MainActivity` must extend `FlutterFragmentActivity`. Register `ios-app://<bundle id>` and `android-app://<package>` for your key in Studio.

## Install

**pubspec.yaml**

```yaml
dependencies:
  tryyoursize: ^0.1.0
```

## Initialize

**Flutter**

```dart

final tys = await TryYourSize.create('pk_test_…');
```

## Client

| | |
|---|---|
| [`TryYourSize.create()`](https://docs.tryyoursize.com/reference/flutter/create.md) | Creates the client. |
| [`recommendation()`](https://docs.tryyoursize.com/reference/flutter/recommendation.md) | The shopper's recommended size for a product, in your size labels. |
| [`onRecommendation()`](https://docs.tryyoursize.com/reference/flutter/on-recommendation.md) | The recommendation now (once known) and on every change: signing in, a new body, a simulation finishing. |
| [`events`](https://docs.tryyoursize.com/reference/flutter/events.md) | Window events: ready, open, close, size, loadError. |
| [`present()`](https://docs.tryyoursize.com/reference/flutter/present.md) | Opens the measuring / try-on window for a product. |
| [`setAppearance()`](https://docs.tryyoursize.com/reference/flutter/set-appearance.md) | Live restyle (e.g. |

## Widgets

| | |
|---|---|
| [`SizeGuide`](https://docs.tryyoursize.com/reference/flutter/size-guide.md) | The compact "Size guide" button, drawn natively: "Size guide" → "Calculating your size…" → "Your size: M". |

## Types

| | |
|---|---|
| [`Recommendation`](https://docs.tryyoursize.com/reference/flutter/recommendation-type.md) | The shopper's recommended size for one product, in the store's own size labels. |
| [`Appearance`](https://docs.tryyoursize.com/reference/flutter/appearance.md) | Like the web SDK's (and Stripe's) Appearance API. |
| [`TryYourSizeException`](https://docs.tryyoursize.com/reference/flutter/errors.md) | Every error the SDK raises: a stable code (e.g. |

---

# Appearance

> Like the web SDK's (and Stripe's) Appearance API.

Source: https://docs.tryyoursize.com/reference/flutter/appearance/

*Type* · `tryyoursize (Dart)`

Like the web SDK's (and Stripe's) Appearance API. Unset values inherit the app's.

## Properties

- **`theme`** (`AppearanceTheme`, required)
- **`colorPrimary`** (`Color?`, required): Buttons, the tape line, the "connected" dot.
- **`colorBackground`** (`Color?`, required)
- **`colorText`** (`Color?`, required)
- **`fontFamily`** (`String?`, required): A CSS font-family for the window (e.g. "Inter, sans-serif").
- **`borderRadius`** (`double?`, required): Corner radius in logical pixels (0–32).
- **`fonts`** (`List<String>`, required): Google Fonts stylesheet URLs for the window.

## Example

**Flutter**

```dart
final tys = await TryYourSize.create('pk_test_…', appearance: const Appearance(borderRadius: 10), locale: 'es');
```

**Swift**

```swift
let tys = try TryYourSize(publishableKey: "pk_test_…", configuration: .init(
    appearance: Appearance(borderRadius: 10),
    locale: "es"))
```

**Kotlin**

```kotlin
val tys = TryYourSize(context, "pk_test_…", TryYourSize.Configuration(
    appearance = Appearance(borderRadius = 10f),
    locale = "es",
))
```

**React Native**

```tsx
await configure("pk_test_…", { appearance: { variables: { borderRadius: 10 } }, locale: "es" });
```

---

# TryYourSize.create()

> Creates the client.

Source: https://docs.tryyoursize.com/reference/flutter/create/

*Function* · `tryyoursize (Dart)`

Creates the client. Throws `TryYourSizeException` (`secret_key_in_app`, `invalid_key`, `invalid_app_identifier`, `invalid_option`).

```dart
static Future<TryYourSize> create(
    String publishableKey, {
    Appearance appearance = const Appearance(),
    String? locale,
    String? embedOrigin,
  })
```

## Parameters

- **`publishableKey`** (`String`, required): Your publishable key.
- **`appearance`** (`Appearance`, optional, default `const Appearance()`): See `Appearance`(/reference/flutter/appearance/).
- **`locale`** (`String?`, optional): BCP 47 language; default: the device language.
- **`embedOrigin`** (`String?`, optional): Development only.

## Example

**Flutter**

```dart
final tys = await TryYourSize.create('pk_test_…', appearance: const Appearance(borderRadius: 10), locale: 'es');
```

**Swift**

```swift
let tys = try TryYourSize(publishableKey: "pk_test_…", configuration: .init(
    appearance: Appearance(borderRadius: 10),
    locale: "es"))
```

**Kotlin**

```kotlin
val tys = TryYourSize(context, "pk_test_…", TryYourSize.Configuration(
    appearance = Appearance(borderRadius = 10f),
    locale = "es",
))
```

**React Native**

```tsx
await configure("pk_test_…", { appearance: { variables: { borderRadius: 10 } }, locale: "es" });
```

---

# TryYourSizeException

> Every error the SDK raises: a stable code (e.g.

Source: https://docs.tryyoursize.com/reference/flutter/errors/

*Type* · `tryyoursize (Dart)`

Every error the SDK raises: a stable `code` (e.g. `app_not_allowed`) and a message.

Codes: [Mobile SDK errors](https://docs.tryyoursize.com/mobile/errors.md).

## Properties

- **`code`** (`String`, required)
- **`message`** (`String`, required)

## Example

**Flutter**

```dart
try {
  tys = await TryYourSize.create(key);
} on TryYourSizeException catch (e) {
  debugPrint('${e.code}: ${e.message}');
}
```

---

# events

> Window events: ready, open, close, size, loadError.

Source: https://docs.tryyoursize.com/reference/flutter/events/

*Property* · `tryyoursize (Dart)`

Window events: ready, open, close, size, loadError.

Event classes: `WindowReady`, `WindowOpened`, `WindowClosed`, `SizeSelected` (preselect `selection.size`) and `LoadError`.

```dart
Stream<TryYourSizeEvent> get events
```

## Example

**Flutter**

```dart
tys.events.listen((e) {
  if (e is SizeSelected) setState(() => size = e.selection.size);
  if (e is LoadError) debugPrint(e.error.code);
});
```

**Swift**

```swift
let sub = tys.on { event in
    switch event {
    case .size(let selection): selectedSize = selection.size   // "Use this size"
    case .loadError(let error): print(error.code)
    default: break
    }
}
```

**Kotlin**

```kotlin
val sub = tys.on { event ->
    when (event) {
        is TryYourSize.Event.Size -> selected = event.selection.size
        is TryYourSize.Event.LoadError -> Log.w("tys", event.error.code.wire)
        else -> Unit
    }
}
```

**React Native**

```tsx
const sub = addEventListener((e) => {
  if (e.type === "size") setSize(e.selection.size);
  if (e.type === "loaderror") console.warn(e.code);
});
```

---

# onRecommendation()

> The recommendation now (once known) and on every change: signing in, a new body, a simulation finishing.

Source: https://docs.tryyoursize.com/reference/flutter/on-recommendation/

*Method* · `tryyoursize (Dart)`

The recommendation now (once known) and on every change: signing in, a new body, a simulation finishing.

```dart
Stream<Recommendation> onRecommendation(String product)
```

## Parameters

- **`product`** (`String`, required): Your product ID or SKU.

## Returns

A stream: the recommendation now (once known) and on every change. Cancel the subscription when done.

## Example

**Flutter**

```dart
final sub = tys.onRecommendation('SKU-123').listen((rec) {
  if (rec.status == RecommendationStatus.ready && !touched) setState(() => size = rec.size);
});
// sub.cancel() in dispose()
```

**Swift**

```swift
let sub = tys.onRecommendation(for: "SKU-123") { rec in
    if rec.status == .ready, !touched { selectedSize = rec.size }
}
// keep `sub`; sub.cancel() when the screen goes away
```

**Kotlin**

```kotlin
val sub = tys.onRecommendation("SKU-123") { rec ->
    if (rec.status == Recommendation.Status.READY && !touched) selected = rec.size
}
// sub.cancel() in onDestroy
```

**React Native**

```tsx
useEffect(() => {
  const sub = addRecommendationListener("SKU-123", (rec) => {
    if (rec.status === "ready" && !touched) setSize(rec.size);
  });
  return () => sub.remove();
}, []);
```

---

# present()

> Opens the measuring / try-on window for a product.

Source: https://docs.tryyoursize.com/reference/flutter/present/

*Method* · `tryyoursize (Dart)`

Opens the measuring / try-on window for a product.

```dart
Future<void> present(String product, {OpenStep? step})
```

## Parameters

- **`product`** (`String`, required): Your product ID or SKU.
- **`step`** (`OpenStep?`, optional): `OpenStep.create`, `improve` or `view`.

## Example

**Flutter**

```dart
await tys.present('SKU-123');                   // or step: OpenStep.view
```

**Swift**

```swift
tys.present(product: "SKU-123")                 // or step: .view, from: viewController
```

**Kotlin**

```kotlin
tys.present(activity, "SKU-123")                // or step = OpenStep.VIEW
```

**React Native**

```tsx
present("SKU-123");                             // or present("SKU-123", "view")
```

---

# Recommendation

> The shopper's recommended size for one product, in the store's own size labels.

Source: https://docs.tryyoursize.com/reference/flutter/recommendation-type/

*Type* · `tryyoursize (Dart)`

The shopper's recommended size for one product, in the store's own size labels.

## Properties

- **`product`** (`String`, required)
- **`status`** (`RecommendationStatus`, required)
- **`size`** (`String?`, required): The recommended size in the store's label (its size map), or null.
- **`studioSize`** (`String?`, required): The same size as entered in TryYourSize Studio, or null.
- **`wearableSizes`** (`List<String>?`, required): Sizes that can be worn on this body, in the store's labels (when simulated).

## Example

**Flutter**

```dart
final rec = await tys.recommendation('SKU-123');
if (rec.status == RecommendationStatus.ready) setState(() => size = rec.size);
```

**Swift**

```swift
let rec = try await tys.recommendation(for: "SKU-123")
if rec.status == .ready, let size = rec.size { selectedSize = size }
```

**Kotlin**

```kotlin
lifecycleScope.launch {
    val rec = tys.recommendation("SKU-123")
    if (rec.status == Recommendation.Status.READY) selected = rec.size
}
```

**React Native**

```tsx
const rec = await getRecommendation("SKU-123");
if (rec.status === "ready") setSize(rec.size);
```

## Notes

`status`: `ready`, `computing`, `noSize` (`"none"` on the web), `signedOut`, `unavailable`.

---

# recommendation()

> The shopper's recommended size for a product, in your size labels.

Source: https://docs.tryyoursize.com/reference/flutter/recommendation/

*Method* · `tryyoursize (Dart)`

The shopper's recommended size for a product, in your size labels. Never starts a simulation; never carries measurements or body data.

```dart
Future<Recommendation> recommendation(String product)
```

## Parameters

- **`product`** (`String`, required): Your product ID or SKU.

## Returns

The shopper's recommended size. See [Recommendation](https://docs.tryyoursize.com/reference/flutter/recommendation-type.md).

## Example

**Flutter**

```dart
final rec = await tys.recommendation('SKU-123');
if (rec.status == RecommendationStatus.ready) setState(() => size = rec.size);
```

**Swift**

```swift
let rec = try await tys.recommendation(for: "SKU-123")
if rec.status == .ready, let size = rec.size { selectedSize = size }
```

**Kotlin**

```kotlin
lifecycleScope.launch {
    val rec = tys.recommendation("SKU-123")
    if (rec.status == Recommendation.Status.READY) selected = rec.size
}
```

**React Native**

```tsx
const rec = await getRecommendation("SKU-123");
if (rec.status === "ready") setSize(rec.size);
```

---

# setAppearance()

> Live restyle (e.g.

Source: https://docs.tryyoursize.com/reference/flutter/set-appearance/

*Method* · `tryyoursize (Dart)`

Live restyle (e.g. when your app switches to dark theme).

```dart
Future<void> setAppearance(Appearance appearance)
```

## Parameters

- **`appearance`** (`Appearance`, required): The new appearance.

## Example

**Flutter**

```dart
await tys.setAppearance(const Appearance(colorPrimary: Color(0xFF3B2F26)));
```

**Swift**

```swift
tys.appearance.colorPrimary = TYSColor(hex: "#3b2f26") // an open window restyles at once
```

**Kotlin**

```kotlin
tys.appearance = tys.appearance.copy(colorPrimary = 0xFF3B2F26.toInt())
```

**React Native**

```tsx
setAppearance({ variables: { colorPrimary: "#3b2f26" } });
```

---

# SizeGuide

> The compact "Size guide" button, drawn natively: "Size guide" → "Calculating your size…" → "Your size: M".

Source: https://docs.tryyoursize.com/reference/flutter/size-guide/

*Component* · `tryyoursize (Dart)`

The compact "Size guide" button, drawn natively: "Size guide" → "Calculating your size…" → "Your size: M". A tap opens the window. Listen to `onRecommendation` to preselect your picker.

```dart
const SizeGuide({
    super.key,
    required this.product,
    this.variant = SizeGuideVariant.link,
    this.label,
    this.width = 220,
  })
```

## Parameters

- **`product`** (`String`, required): Your product ID or SKU.
- **`variant`** (`SizeGuideVariant`, optional, default `SizeGuideVariant.link`): `link` (default) or `button`.
- **`label`** (`String?`, optional): Your own words instead of "Size guide".
- **`width`** (`double`, optional, default `220`): Platform views need a bounded width (default 220).

## Example

**Flutter**

```dart
const SizeGuide(product: 'SKU-123') // listen to tys.onRecommendation to preselect
```

**Swift**

```swift
// SwiftUI, where your "Size guide" link was
SizeGuide(client: tys, product: "SKU-123") { rec in
    if rec.status == .ready, !touched { selectedSize = rec.size }
}
```

**Kotlin**

```kotlin
// Compose, where your "Size guide" link was
SizeGuide(tys, "SKU-123", textStyle = MaterialTheme.typography.bodyMedium) { rec ->
    if (rec.status == Recommendation.Status.READY && !touched) selected = rec.size
}
```

**React Native**

```tsx
<SizeGuide
  product="SKU-123"
  onRecommendation={(rec) => rec.status === "ready" && !touched && setSize(rec.size)}
/>
```