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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/flutter-sdk/integration-guide-v2/customization/video-feed-configurations-flutter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.