SizeGuide

Componenttryyoursize (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.

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

Parameters

productStringRequired

Your product ID or SKU.

variantSizeGuideVariantOptional= SizeGuideVariant.link

link (default) or button.

labelString?Optional

Your own words instead of "Size guide".

widthdoubleOptional= 220

Platform views need a bounded width (default 220).

Example

FlutterSwiftKotlinReact Native

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

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

// 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
}

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