# 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](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/VideoFeedConfiguration-class.html) for more details.

### Customize video feed item title

```dart
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 background drawable of video feed item title
// Only supported on Android
titleConfiguration.gradientDrawable = GradientDrawable(
  orientation: GradientDrawableOrientation.rightLeft,
  colors: <String>[
    "#FF48C9B0",
    "#FFD98880",
    "#FFF4D03F",
  ],
);
videoFeedConfiguration.title = titleConfiguration;
// Configure video item title position
videoFeedConfiguration.titlePosition = VideoFeedTitlePosition.nested;

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

### Customize other video feed configuration

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