Video feed configurations (Flutter)

VideoFeed widget provides videoFeedConfiguration property for configuring Video Feed. The current configurable are backgroundColor, cornerRadius, and titlePosition etc. Please refer to VideoFeedConfiguration for more details.

Customize video feed item title

final videoFeedConfiguration = VideoFeedConfiguration();

final titleConfiguration = VideoFeedTitleConfiguration();
// Specifies if the video feed title is hidden
titleConfiguration.hidden = false;
// Configure video feed title color
titleConfiguration.textColor = '#000000';
// Configure video feed title font size
titleConfiguration.fontSize = 16;
// Configure the number of allowed lines for the label
titleConfiguration.numberOfLines = 2;
// Configure iOS font info.
// The property is ignored when fontSize is not set
titleConfiguration.iOSFontInfo = IOSFontInfo(
  fontName: "Helvetica",
  systemFontStyle: IOSSystemFontStyle.italic,
  systemFontWeight: IOSSystemFontWeight.heavy,
);
// Configure Android font info.
// The property is ignored when fontSize is not set
titleConfiguration.androidFontInfo = AndroidFontInfo(
  isCustom: false,
  typefaceName: "SANS_SERIF",
);
// Configure the background drawable of video feed title
// Only supported on Android
titleConfiguration.gradientDrawable = GradientDrawable(
  orientation: GradientDrawableOrientation.rightLeft,
  colors: <String>[
    "#FF48C9B0",
    "#FFD98880",
    "#FFF4D03F",
  ],
);
videoFeedConfiguration.title = titleConfiguration;
// Configure title position
videoFeedConfiguration.titlePosition = VideoFeedTitlePosition.nested;

VideoFeed(
  source: VideoFeedSource.discover,
  videoFeedConfiguration: videoFeedConfiguration,
);

Customize other video feed configuration

final videoFeedConfiguration = VideoFeedConfiguration();

// Configure background color
videoFeedConfiguration.backgroundColor = "#ffffff";
// Configure the corner radius for video feed item
videoFeedConfiguration.cornerRadius = 10;
// Configure video feed item play icon
videoFeedConfiguration.playIcon = VideoFeedPlayIconConfiguration(
  hidden: true,
  iconWidth: 30,
);
// Indicates if the video feed shows ad badge
videoFeedConfiguration.showAdBadge = true;
// The aspect ratio(width / height) for video feed item
videoFeedConfiguration.aspectRatio = 9 / 16;
// Configure content padding
// Only supported on iOS.
videoFeedConfiguration.contentPadding = VideoFeedPadding(
  top: 10,
  right: 10,
  bottom: 10,
  left: 10,
);
// Configure the item spacing
videoFeedConfiguration.itemSpacing = 10;
// Specifies if video feed item autoplay is enabled
videoFeedConfiguration.enableAutoplay = true;
// Configure the number of feed items to be displayed per row.
// The property only takes effect when video feed mode is grid.
videoFeedConfiguration.gridColumns = 2;
VideoFeed(
  source: VideoFeedSource.discover,
  videoFeedConfiguration: videoFeedConfiguration,
);

Last updated

Was this helpful?