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?