firebase / firebase/flutterfire

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

Open
#18,381 1 comment 0 reactions 1 assignee Claimed by @SelaseKay View on GitHub
Needs Attention plugin: in_app_messaging type: enhancement
Dominant language
Dart
Stars
9.3k
Forks
4.1k
Avg merge
1d 19h
Merged PRs (30d)
53

Description

## 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 = ` delivering `InAppMessagingDisplayMessageProtocol` + `InAppMessagingDisplayDelegate`.

### Proposed Dart surface

```dart
// 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 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.