# 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]({{< ref "/guides/features/messaging/scenes/embedded-content.md" >}}).


## 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**

```dart
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**

```dart
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:

```dart
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**

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

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


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

```dart
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**

```dart
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,
        );
      },
    );
  }
}
```