Customize click behaviors (Flutter)

The SDK provides behavior callbacks to customize click behaviors, including those for the video CTA button, product cards, and shopping CTA button.

Customize video overlay CTA button click behavior

Set FireworkSDK.getInstance().onCustomCTAClick to customize video overlay CTA button click behavior. The event type is CustomCTAClickEvent.

FireworkSDK.getInstance().onCustomCTAClick =
    (CustomCTAClickEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // Please refer to "Navigate to the host app page" below for more details.
};

Customize product card click behavior

Set FireworkSDK.getInstance().shopping.onCustomTapProductCard to customize product card click behavior. The event type is CustomTapProductCardEvent.

FireworkSDK.getInstance().shopping.onCustomTapProductCard = 
    (CustomTapProductCardEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // Please refer to "Navigate to the host app page" below for more details.
}

Customize shopping CTA click behavior

Set FireworkSDK.getInstance().shopping.onShoppingCTA to customize shopping CTA click behavior. The event type is ShoppingCTAEvent. And host app can return a ShoppingCTAResult object to tell FireworkSDK the result.

FireworkSDK.getInstance().shopping.onShoppingCTA =
    (ShoppingCTAEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // Please refer to "Navigate to the host app page" below for more details.

  return ShoppingCTAResult(
    res: ShoppingCTARes.success,
  );
};

Customize product link button click behavior

Set FireworkSDK.getInstance().shopping.onCustomClickLinkButton to customize product link button click behavior. The event type is CustomClickLinkButtonEvent.

FireworkSDK.getInstance().shopping.onCustomClickLinkButton = 
    (CustomTapProductCardEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // Please refer to "Navigate to the host app page" below for more details.
}

Customize cart icon click behavior

Set FireworkSDK.getInstance().shopping.onCustomClickCartIcon to customize cart icon click behavior. The event type is CustomClickCartIconEvent.

FireworkSDK.getInstance().shopping.onCustomClickCartIcon =
                    (event) async {
  // Here, you could write codes to navigate to the host app page.
  // Please refer to "Navigate to the host app page" below for more details.
};

Customize livestream link interaction click behavior

Set FireworkSDK.getInstance().liveStream.onCustomLinkInteractionClick to customize livestream link interaction click behavior. The event type is CustomLinkInteractionClickEvent.

FireworkSDK.getInstance().liveStream.onCustomLinkInteractionClick =
    (CustomLinkInteractionClickEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // Please refer to "Navigate to the host app page" below for more details.
};

Navigate to the host app page

Typically, we need to navigate to the host app page when customizing click behaviors. However, the Flutter navigation stack may be obscured by the Firework full-screen player. When the host app navigates to a new Flutter page (for instance, using Navigator.of(context).pushNamed) within the Flutter navigation stack when customizing click behaviors, it will be obscured by the Firework full-screen player.

As illustrated in the following code snippets, you can invoke our APIs to convert the Firework full-screen player (if it exists) into a floating player or close it when customizing click behaviors. This approach ensures that the new Flutter page will not be obscured by the Firework full-screen player.

FireworkSDK.getInstance().shopping.onCustomTapProductCard = 
    (CustomTapProductCardEvent? event) async {
  // Use the following codes to convert the Firework full-screen player (if it exists)
  // into a floating player or close it
  final result =
      await FireworkSDK.getInstance().navigator.startFloatingPlayer();
  if (!result) {
    await FireworkSDK.getInstance().navigator.popNativeContainer();
  }

  // If the context is available, you could also call
  // Navigator.of(context).pushNamed to push the host app page.
  globalNavigatorKey.currentState?.pushNamed('/host_app_page');
}

The above code snippets are based on onCustomTapProductCard. But they are also applicable to other behavior callbacks.