# Video Feed (Flutter)

Currently, there are eight source types of the video feed:

* Discover
* Channel
* Playlist
* Playlist Group(Only supported on iOS)
* Dynamic Content
* Hashtag Playlist
* SKU
* Single Content

## Integration

```dart
import 'package:fw_flutter_sdk/fw_flutter_sdk.dart';

/// discover
VideoFeed(
  height: 200,
  source: VideoFeedSource.discover,
);

/// channel
VideoFeed(
  height: 200,
  source: VideoFeedSource.channel,
  channel: "your encoded channel id",
);

/// playlist
VideoFeed(
  height: 200,
  source: VideoFeedSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
);


/// playlist group
VideoFeed(
  height: 200,
  source: VideoFeedSource.playlistGroup,
  playlistGroup: "your encoded playlist group id",
);

/// dynamic content
VideoFeed(
  height: 200,
  source: VideoFeedSource.dynamicContent,
  dynamicContentParameters: const {
    '<cohort key>': ['<cohort value1>', '<cohort value2>']
  },
);

/// hashtag playlist
VideoFeed(
  height: 200,
  source: VideoFeedSource.hashtagPlaylist,
  channel: "your encoded channel id",
  hashtagFilterExpression: "<hashtag filter expression>",
);

/// sku playlist
VideoFeed(
  height: 200,
  source: VideoFeedSource.sku,
  channel: "your encoded channel id",
  productIds: ["prodct_id_1", "prodct_id_2"],
);

/// single content
VideoFeed(
  height: 200,
  source: VideoFeedSource.singleContent,
  contentId: "your encoded video or live stream id"
);
```

{% hint style="info" %}
Please refer to the [Encoded IDs](/firework-for-developers/additional-resources/encoded-ids.md) help article to learn about how to find your encoded channel ID, playlist ID, playlist Group ID
{% endhint %}

### Mode

`VideoFeed` widget supports three modes: `row`, `column`, and `grid`.

Use `grid` mode:

```dart
Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: VideoFeed(
        source: VideoFeedSource.discover,
        mode: VideoFeedMode.grid,
      ),
    )
  ],
);
```

### Video feed loading result callback

`VideoFeed` widget provides `onVideoFeedLoadFinished` property for setting video feed loading result callback.

```dart
VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedLoadFinished: (error) {},
);
```

### Empty callback

`VideoFeed` widget provides `onVideoFeedEmpty` property for setting video feed empty callback. The callback is triggered when there are no items in the video feed. For example, you could hide the widget when the callback is triggered. The callback is triggered in the following scenarios:

1. Load successfully but the back end returns an empty list
2. The load failed and the list is empty

```dart
VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedEmpty: (error) {
    // Hide the widget
  },
);
```

### Force refreshing video feed

```dart
VideoFeedController? _feedController;

VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedCreated: (controller) {
    _feedController = controller;
  },
);

//force refreshing video feed
_feedController?.refresh();
```

### Enable PiP(Picture in Picture)

Please refer to [Enable PiP(Picture in Picture)](https://docs.firework.com/firework-for-developers/ios-sdk/integration-guide-for-ios-sdk/customization-ios/video-player#enable-pip-picture-in-picture).

### Keep alive when scrolling the widget out of the view box

Generally, if you put the video feed widget as the child of ListView, it will be rebuilt when scrolling the widget out of the view box. You could set `wantKeepAlive` as `true` to make the video feed widget keep alive when scrolling the widget out of the view box.

```dart
VideoFeed(
  height: 200,
  source: VideoFeedSource.discover,
  // Keep the widget alive when scrolling the widget out of the view box
  wantKeepAlive: true,
);
```

### onVideoFeedClick

The callback is triggered when users click the video feed or circle story item. The event type is [VideoFeedClickEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/VideoFeedClickEvent-class.html).

<pre class="language-dart"><code class="lang-dart"><strong>FireworkSDK.getInstance().onVideoFeedClick = (event) {};
</strong></code></pre>

### onCustomCTAClick

The callback is triggered when users click the CTA button on the video in the video player. We start the floating player in the following sample codes. The event type is [CustomCTAClickEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomCTAClickEvent-class.html).

<pre class="language-dart"><code class="lang-dart"><strong>FireworkSDK.getInstance().onCustomCTAClick =
</strong>    (CustomCTAClickEvent? event) async {
  final result =
      await FireworkSDK.getInstance().navigator.startFloatingPlayer();
  if (!result) {
    // When the result is false, the current fullscreen player may not
    // enable the floating player. In that case, we could call the
    // following method to close the fullscreen player.
    await FireworkSDK.getInstance().navigator.popNativeContainer();
  }
  
  // If the context is available, you could also call
  // Navigator.of(context).pushNamed to push the Flutter link content page.
  globalNavigatorKey.currentState?.pushNamed('/link_content', arguments: {
    "url": event?.url ?? '',
  });
};
</code></pre>

### Video feed configurations

Please refer to [Video feed configurations (Flutter)](/firework-for-developers/flutter-sdk/integration-guide-v2/customization/video-feed-configurations-flutter.md).

### Player configurations

Please refer to [Player configurations (Flutter)](/firework-for-developers/flutter-sdk/integration-guide-v2/customization/player-configurations-flutter.md).

## Reference

[VideoFeed](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/VideoFeed-class.html)


---

# 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/video-feed.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.