Skip to main content
The Stac Hero allows you to build a Flutter Hero widget using JSON. It enables hero animations between routes by tagging widgets with the same tag. To know more about the Hero widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
tagStringRequired. The hero tag used to match heroes across routes.
childStacWidgetRequired. The widget subtree for this hero.
createRectTweenStacWidgetOptional rectangle tween configuration for the hero animation.
flightShuttleBuilderStacWidgetOptional widget used as the in-flight shuttle during the hero animation.
placeholderBuilderStacWidgetOptional placeholder widget displayed while the destination hero builds.
transitionOnUserGesturesboolWhether the hero should participate in a user gesture driven transition.

​
Example

StacHero(
  tag: 'userAvatar',
  child: StacImage(network: 'https://example.com/avatar.png'),
)

​
Hero Animation Example

Here’s an example showing a hero animation from a list to a detail page: 
// List Item
StacGestureDetector(
  onTap: StacNavigateAction(
    routeName: '/detail',
  ),
  child: StacHero(
    tag: 'product-1',
    child: StacImage(
      network: 'https://example.com/product.png',
      width: 100.0,
      height: 100.0,
    ),
  ),
)

// Detail Page
StacHero(
  tag: 'product-1',
  child: StacImage(
    network: 'https://example.com/product.png',
    width: 300.0,
    height: 300.0,
  ),
)