[firebase_in_app_messaging]: Support custom Flutter UI for In-App Messaging (expose native custom display component)

[danielgomezrico]

Is there an existing issue for this?

I searched open and closed issues in firebase/flutterfire for in_app_messaging custom display / custom UI / FirebaseInAppMessagingDisplay / InAppMessagingDisplay and found none requesting this.

Which Firebase Products are affected?

In-App Messaging

What feature would you like to see?

Expose a way to render In-App Messaging campaigns with a fully custom Flutter UI, replacing the native default templates (modal / card / banner / image-only).

Today firebase_in_app_messaging (latest 0.9.2+4) only wraps:

• triggerEvent
• setMessagesSuppressed
• setAutomaticDataCollectionEnabled

All message rendering happens 100% in the native iOS/Android SDK with its built-in look & feel. There is no Dart API to intercept a fetched message and draw it with the app's own widgets, fonts, design tokens, and buttons. The FlutterFire docs explicitly acknowledge this and redirect to platform-native APIs ("To do so, you will have to use the platform-native APIs. See the documentation for iOS and Android").

Both native SDKs already support this through a custom display component:

• Android: FirebaseInAppMessaging.getInstance().setMessageDisplayComponent(FirebaseInAppMessagingDisplay) delivering an InAppMessage + FirebaseInAppMessagingDisplayCallbacks.
• iOS: InAppMessaging.inAppMessaging().messageDisplayComponent = <InAppMessagingDisplay> delivering InAppMessagingDisplayMessageProtocol + InAppMessagingDisplayDelegate.

Proposed Dart surface

// Opt in to custom rendering; native registers the display component.
await FirebaseInAppMessaging.instance.setCustomDisplay(enabled: true);

// Messages the native SDK decided to show, forwarded instead of drawn natively.
Stream<InAppMessageData> FirebaseInAppMessaging.instance.onMessage;

// App reports lifecycle back so analytics/impressions/conversions keep working.
await message.markAsImpressed();
await message.followAction(button);   // triggers the campaign action + logs the click
await message.dismiss(DismissType.auto | .click | .swipe);

Where InAppMessageData carries the campaign payload that both SDKs already expose: campaignId, campaignName, message type, title (+ text color), body (+ text color), image URL, background color, action URL, and primary/secondary buttons (text, textColor, backgroundColor, actionUrl).

Why

• Native templates cannot use a brand's custom fonts, button widgets, or design-system styling — only colors/text/image set in the console.
• Teams that want consistent UI currently have to drop down to platform channels and re-implement the display component twice (Kotlin + Swift), which is exactly the boilerplate a federated plugin should own.

I'm implementing this as a local plugin in our app and would be happy to contribute the approach upstream if there's interest.

How were you trying to achieve it?

Custom display components are only reachable via the native SDKs; there is no firebase_in_app_messaging / firebase_in_app_messaging_platform_interface API to register one or receive the message in Dart.