Skip to main content

Embedding Stories

The Nudge SDK enables seamless integration of interactive stories into your Flutter application, enhancing user engagement through dynamic content delivery.

Importing the Package​

Ensure that nudgecore_v2 is imported in your Dart file:

import 'package:nudgecore_v2/nudgecore_v2.dart';

Embedding Nudge Stories​

To integrate stories within your Flutter UI, use the NudgeStories widget. This widget dynamically renders stories based on the specified widget ID and supports customization.

Usage Example​

NudgeStories(
    id: 'home_page_banner',
    horizontalEdgePadding: HorizontalEdgePadding(left: 16, right: 16),
    verticalEdgePadding: VerticalEdgePadding(top: 0, bottom: 0),
    titleColorDarkMode: Colors.green,
    titleColorLightMode: Colors.yellow,
    subtitleColorDarkMode: Colors.red,
    subtitleColorLightMode: Colors.blue,
)

Parameters:​

  • id (String) - Unique identifier for the story component, as defined in the Nudge dashboard.
  • horizontalEdgePadding (HorizontalEdgePadding) - Sets left and right padding for the stories widget.
  • verticalEdgePadding (VerticalEdgePadding) - Defines top and bottom spacing.
  • titleColorDarkMode (Color) - Title text color in dark mode.
  • titleColorLightMode (Color) - Title text color in light mode.
  • subtitleColorDarkMode (Color) - Subtitle text color in dark mode.
  • subtitleColorLightMode (Color) - Subtitle text color in light mode.

Integration Notes​

  • Ensure the widget ID matches the one configured in the Nudge dashboard.
  • The NudgeStories widget must be placed within an appropriate widget tree to ensure visibility.
  • The appearance of stories dynamically updates based on campaign settings.