firebase / firebase/flutterfire
[firebase_in_app_messaging]: Support custom Flutter UI for In-App Messaging (expose native custom display component)
- 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
Assessment
This issue has not been assessed yet.