Navigate To Flutter Page From player

Scenarios

Scenario 1

When users click the CTA, the default behavior is rendering the CTA link content using the native web view. But the host app developers may want to render the CTA link content using the Flutter page.

Scenario 2

When users click the cart icon, the host app may want to navigate the custom Flutter cart page.

Issues

Both the CTA button and cart icon belong to the video player. There are similar issues in these two scenarios. As follows, when the video player is launched, the Flutter navigation stack is covered by the video player.

And when the host app developers use Navigator.of(context).pushNamed to navigate the Flutter page, the page will be rendered in the bottom Flutter navigation stack. Therefore, the new Flutter page would be covered by the video player(native page).

Solution

Start floating player

If the floating player is enabled, the host app could start the floating player when users click the CTA button or the cart icon.

Start floating player when users click the CTA button

FireworkSDK.getInstance().onCustomCTAClick =
    (CustomCTAClickEvent? event) async {
  final result =
      await FireworkSDK.getInstance().navigator.startFloatingPlayer();
  if (!result) {
    // When the result is false, the current fullscreen player may not
    // enable the floating player. In that case, we could call the
    // following method to close the fullscreen player.
    await FireworkSDK.getInstance().navigator.popNativeContainer();
  }
  
  // If the context is available, you could also call
  // Navigator.of(context).pushNamed to push the Flutter link content page.
  globalNavigatorKey.currentState?.pushNamed('/link_content', arguments: {
    "url": event?.url ?? '',
  });
};

Start floating player when users click the cart icon

FireworkSDK.getInstance().onCustomClickCartIcon =
    () async {
  final result =
      await FireworkSDK.getInstance().navigator.startFloatingPlayer();
  if (!result) {
    // When the result is false, the current fullscreen player may not
    // enable the floating player. In that case, we could call the
    // following the method to close the fullscreen player.
    await FireworkSDK.getInstance().navigator.popNativeContainer();
  }
  
  // If the context is available, you could also call
  // Navigator.of(context).pushNamed to push the Flutter cart page.
  globalNavigatorKey.currentState?.pushNamed('/cart');
};