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 item title is hidden
titleConfiguration.hidden = false;
// Configure video feed item title color
titleConfiguration.textColor = '#000000';
// Configure video feed item title font size
titleConfiguration.fontSize = 16;
// Configure the number of allowed lines for the video feed item title
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 font weight. Only supported on Android.
  // On Android 9 (API 28) and above the exact weight is applied.
  // On older versions the title is bold when the weight is
  // FontWeight.w600 or heavier, and normal otherwise.
  weight: FontWeight.w700,
  // Configure the font style. Only supported on Android.
  // Accepts FontStyle.normal or FontStyle.italic.
  style: FontStyle.italic,
);
// Configure the background drawable of video feed item title
// Only supported on Android
titleConfiguration.gradientDrawable = GradientDrawable(
  orientation: GradientDrawableOrientation.rightLeft,
  colors: <String>[
    "#FF48C9B0",
    "#FFD98880",
    "#FFF4D03F",
  ],
);
// Configure the horizontal alignment of the video feed item title text.
// Cross-platform (iOS & Android). Defaults to center when unset.
titleConfiguration.textAlignment = VideoFeedTitleTextAlignment.center;
videoFeedConfiguration.title = titleConfiguration;
// Configure video item 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
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,
);