Player deck configurations (Flutter)

PlayerDeck widget provides playerDeckConfiguration property for configuring Player Deck. The current configurable properties include backgroundColor, cornerRadius, itemSpacing, contentPadding, autoplay, item controls, ad badge, fullscreen behavior, and subtitles. Please refer to PlayerDeckConfiguration for more details.

Customize player deck appearance and layout

final playerDeckConfiguration = PlayerDeckConfiguration(
  // Configure background color
  backgroundColor: "#FFFFFF",
  // Configure the corner radius for each deck item
  cornerRadius: 8,
  // Configure the spacing between each deck item
  itemSpacing: 16,
  // Configure content padding
  contentPadding: PlayerDeckPadding(
    top: 10,
    right: 10,
    bottom: 10,
    left: 10,
  ),
);

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  playerDeckConfiguration: playerDeckConfiguration,
);

Customize player deck item controls

final playerDeckConfiguration = PlayerDeckConfiguration(
  // Specifies if player deck item autoplay is enabled
  enableAutoplay: true,
  // Specifies if the play icon is hidden
  hidePlayIcon: false,
  // Configure the width of the play icon
  playIconWidth: 50,
  // Specifies if the ad badge is shown
  showAdBadge: true,
  // Specifies if the share button is shown
  showShareButton: true,
  // Specifies if full screen mode is enabled for the deck player
  enableFullScreen: true,
);

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  playerDeckConfiguration: playerDeckConfiguration,
);

Customize player deck subtitles

final playerDeckConfiguration = PlayerDeckConfiguration(
  subtitleConfiguration: PlayerDeckSubtitleConfiguration(
    textColor: "#FFFFFF",
    backgroundColor: "#000000",
  ),
);

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  playerDeckConfiguration: playerDeckConfiguration,
);

Update player deck configuration

You can update playerDeckConfiguration by rebuilding the PlayerDeck widget with a new PlayerDeckConfiguration value.

PlayerDeckConfiguration _playerDeckConfiguration = PlayerDeckConfiguration(
  enableAutoplay: true,
);

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  playerDeckConfiguration: _playerDeckConfiguration,
);

void disablePlayerDeckAutoplay() {
  setState(() {
    _playerDeckConfiguration = PlayerDeckConfiguration(
      enableAutoplay: false,
    );
  });
}