> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/flutter-sdk/integration-guide-v2/customization/video-feed-configurations-flutter.md).

# 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 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

```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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.