Embedded Content

Integrate Embedded Content into your Flutter app to display Scene content directly within your app’s screens. For information about Embedded Content, including overview, use cases, and how to create Embedded Content view styles and Scenes, see Embedded Content.

Adding an embedded view

The AirshipEmbeddedView widget defines a place for Airship Embedded Content to be displayed. When defining an AirshipEmbeddedView, specify the embeddedId for the content it should display. The value of the embeddedId must be the ID of an Embedded Content view style in your project.

Basic integration

import 'package:airship_flutter/airship_flutter.dart';

// Show any "home_banner" Embedded Content
AirshipEmbeddedView(embeddedId: "home_banner")

Sizing

The AirshipEmbeddedView accepts optional parentWidth and parentHeight parameters for controlling its dimensions. If not provided, the widget uses the available width and height. Use parentHeight for a constant height instead of a height-constrained container, as this allows the view to properly collapse to zero height when content is dismissed.

Custom sizing

AirshipEmbeddedView(
  embeddedId: "home_banner",
  parentWidth: 400,
  parentHeight: 200,
)

Checking if embedded content is available

Use Airship.inApp.isEmbeddedAvailable to check if embedded content is currently available for a given ID:

import 'package:airship_flutter/airship_flutter.dart';

final isAvailable = Airship.inApp.isEmbeddedAvailable(embeddedId: "home_banner");

Listening for embedded content updates

Use Airship.inApp.isEmbeddedAvailableStream to observe changes in the availability of embedded content for a given ID. The stream emits a boolean indicating whether content is available to display. It immediately emits the current state upon subscription, then emits updates whenever the state changes.

Availability stream

import 'package:airship_flutter/airship_flutter.dart';

final subscription = Airship.inApp
    .isEmbeddedAvailableStream(embeddedId: "home_banner")
    .listen((isAvailable) {
  print("home_banner is available: $isAvailable");
});

// Cancel the subscription when no longer needed
subscription.cancel();

Listing all pending embedded content

Use Airship.inApp.getEmbeddedInfos() to get a list of all EmbeddedInfo objects across all embedded IDs that are pending display. Pending content has been triggered and prepared but has not yet been displayed in an AirshipEmbeddedView. Each EmbeddedInfo contains the embeddedId it is associated with.

List<EmbeddedInfo> allPending = Airship.inApp.getEmbeddedInfos();

To observe changes to pending embedded content, use the onEmbeddedInfoUpdated stream:

Airship.inApp.onEmbeddedInfoUpdated.listen((List<EmbeddedInfo> infos) {
  print("Pending embedded infos updated: $infos");
});

Showing a placeholder when content is unavailable

The AirshipEmbeddedView collapses to zero height when no content is available. Use isEmbeddedAvailableStream to toggle between a placeholder and the embedded view based on content availability.

Embedded view with placeholder

import 'package:flutter/material.dart';
import 'package:airship_flutter/airship_flutter.dart';

class HomeBanner extends StatelessWidget {
  const HomeBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      // The stream emits the current state immediately upon subscription
      stream: Airship.inApp.isEmbeddedAvailableStream(embeddedId: "home_banner"),
      builder: (context, snapshot) {
        final isAvailable = snapshot.data ?? false;

        if (!isAvailable) {
          // Display a placeholder when no content is available
          return const SizedBox(
            height: 200,
            child: Center(child: Text("No content available")),
          );
        }

        // Display the Airship content when it becomes available
        return const AirshipEmbeddedView(
          embeddedId: "home_banner",
          parentHeight: 200,
        );
      },
    );
  }
}