# Inicio rápido de Flutter

> El plugin tryyoursize sobre los SDK nativos. El botón Guía de tallas y la talla recomendada del cliente.

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

> **Para tu equipo de desarrollo**
>
> **Qué hace:** Añade el botón nativo «Guía de tallas» de TryYourSize y la talla recomendada del cliente a nuestra app de Flutter. La app solo recibe tallas.
>
> **Tiempo necesario:** Alrededor de un día.
>
> **Qué enviarle:** La clave publicable de prueba (pk_test_…) y el bundle ID de iOS y el paquete de Android de nuestra app, que hay que registrar.

Un plugin fino sobre los SDK nativos de [iOS](https://docs.tryyoursize.com/es/quickstarts/ios.md) y [Android](https://docs.tryyoursize.com/es/quickstarts/android.md). La ventana de medidas y de prueba virtual en 3D es nuestra ventana web, que abre el SDK nativo (en una hoja en iOS y a pantalla completa en Android).

> **Caution: Vista previa**
>
> El plugin de Flutter está en vista previa: todavía no ha pasado nuestras pruebas de build y en dispositivos. Los SDK nativos sobre los que funciona sí están probados. De momento, los orígenes de app solo funcionan en modo de prueba; la publicación en pub.dev llegará pronto.

## Instalación

```yaml
# pubspec.yaml
dependencies:
  tryyoursize: ^0.1.0   # desde el código fuente que compartimos durante el piloto
```

- **iOS** (16+): el plugin depende del pod `TryYourSize` (CocoaPods; `platform :ios, '16.0'`).
- **Android** (minSdk 24): el plugin depende de `com.tryyoursize:tryyoursize-android`. La ventana necesita una `ComponentActivity` de androidx, así que `MainActivity` debe extender **`FlutterFragmentActivity`**:

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

## Registra tu app

En Studio, para el modo de prueba, añade `ios-app://<tu bundle id>` y `android-app://<tu paquete>` (en minúsculas).

## Uso

```dart
final tys = await TryYourSize.create(
  'pk_test_…',
  appearance: const Appearance(borderRadius: 10),   // tema por defecto: hereda los colores de tu app
);

// El botón, donde estaba tu enlace "Size guide". Al tocarlo se abre la ventana.
const SizeGuide(product: 'SKU-123');                 // o variant: SizeGuideVariant.button

// Preselecciona la talla recomendada, pero nunca por encima de la elección del cliente.
tys.onRecommendation('SKU-123').listen((rec) {
  if (rec.status == RecommendationStatus.ready && !touched) select(rec.size!);
});

// El cliente ha elegido una talla en la ventana.
tys.events.listen((e) {
  if (e is SizeSelected) select(e.selection.size);
});

// Sin el botón:
final rec = await tys.recommendation('SKU-123');
await tys.present('SKU-123');
```

| `Recommendation` | |
|---|---|
| `status` | `ready`, `computing`, `noSize` (simulado, ninguna talla se puede llevar), `signedOut`, `unavailable` (aún no hay talla para este producto) |
| `size` | La talla recomendada con **tu** etiqueta, o null |
| `studioSize` | La misma talla tal como se introdujo en Studio |
| `wearableSizes` | Las tallas que se pueden llevar con este cuerpo, con tus etiquetas |

Los errores son `TryYourSizeException` con un `code` estable: `secret_key_in_app`, `invalid_key`, `invalid_app_identifier`, `app_not_allowed`, `window_unreachable`.

**Apariencia:** `theme` (`inherit` o `tryyoursize`, nuestra marca en beige claro), `colorPrimary`, `colorBackground`, `colorText`, `fontFamily`, `borderRadius` (0–32) y `fonts` (URL de hojas de estilo de Google Fonts). `tys.setAppearance(...)` cambia el estilo en directo, por ejemplo cuando tu app pasa a modo oscuro.