Hybrid Navigation

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

As follows, we add a new native container to embed a new Flutter navigation stack:

API

We add FWNavigator to help navigate from the native page to the Flutter page.

Integration steps for scenario 1

On the iOS side

The host app needs to return the FlutterViewController instance in SwiftFireworkFlutterSdkPlugin.navigatorPageProvider. The sample file is AppDelegate.swift.

On the Android side

The host app needs to set FireworkFlutterSdkPlugin.containerFragmentDelegate and return FlutterFragment instance in getFragment method. The sample file is MainActivity.kt.

On the Dart side

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 remove new_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:

1. host_app_shopping_service.dart

2. cart_screen.dart

For integration steps for scenario 2, you could refer to Navigate to the Flutter page from the video player.

The reasons for creating the Flutter engine by the host app

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.

Close the video or live stream player

If you don't want to handle hybrid navigation, you could use FireworkSDK.getInstance().navigator.popNativeContainer() to close the video or live stream player.