Hybrid navigation
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.
When users click the cart icon, the host app may want to navigate the custom Flutter cart page.
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).As follows, we add a new native container to embed a new Flutter navigation stack:

The host app needs to return the
FlutterViewController
instance in SwiftFireworkFlutterSdkPlugin.navigatorPageProvider
. The sample file is AppDelegate.swift.The host app needs to set
FireworkFlutterSdkPlugin.containerFragmentDelegate
and return FlutterFragment
instance in getFragment
method. The sample file is MainActivity.kt.- 1.Add route configuration for the custom CTA link content page. For example, we could set the route name to
/cta_link_content
. The sample file is routes.dart. - 2.In the sample project, we add
new_native_container
(or any other custom prefix without/
) to the prefix of route name, which could avoid rendering the screen whose route name is/
in the new engine. Therefore, we need to removenew_native_container
from the route name. The sample file is my_app.dart. - 3.Custom back button of the app bar. For the new native container, we need to call
FireworkSDK.getInstance().navigator.popNativeContainer()
to pop the native container. The sample file is fw_app_bar.dart.
As above steps, we create a new Flutter engine for the new native container. Therefore, we also provide FWEventBus to dispatch events across Flutter engines. You could refer to the following files for more details:
For integration steps for scenario 2, you could refer to Navigate to the Flutter page from the video player.
- 1.Creating the Flutter engine by the host app has better performance. For example, the host app could use Flutter Engine Group to manage multiple engines.
- 2.We need to use
GeneratedPluginRegistrant
to register related plugins in the new Engine. But the iOS platform codes of Firework Flutter SDK can't access the class.
If you don't want to handle hybrid navigation, you could use
FireworkSDK.getInstance().navigator.popNativeContainer()
to close the video or live stream player.Last modified 6h ago