YoutubePlayer class

A YouTube player widget with YouTube-styled custom controls.

Wraps YoutubePlayerController from youtube_player_iframe and renders a fully themed controls overlay instead of YouTube's native controls.

Minimal usage

YoutubePlayer(
  controller: YoutubePlayerController.fromVideoId(
    videoId: 'dQw4w9WgXcQ',
    autoPlay: true,
  ),
)

Custom controls

Use Stack to overlay controls on top of the player surface. The player widget occupies the video area; place controls with Positioned.

YoutubePlayer(
  controller: controller,
  builder: (context, player, ctrl) => Stack(
    children: [
      player,
      Positioned(bottom: 0, left: 0, right: 0, child: MyControls(controller: ctrl)),
    ],
  ),
)

Theming

Apply YoutubePlayerTheme via ThemeData.extensions to override defaults:

ThemeData(
  extensions: const [YoutubePlayerTheme(progressBarActiveColor: Colors.red)],
)

Inheritance

Constructors

YoutubePlayer({Key? key, required YoutubePlayerController controller, double aspectRatio = 16 / 9, YoutubePlayerBuilder? builder, Duration autoHideDuration = const Duration(seconds: 3), Color? backgroundColor, Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = const <Factory<OneSequenceGestureRecognizer>>{}, bool keepAlive = false, bool autoFullScreen = true, bool enableFullScreenOnVerticalDrag = true}): const

Properties

aspectRatio → double: Aspect ratio of the video surface. Defaults to 16/9.
final
autoFullScreen → bool: Automatically enter fullscreen when the device rotates to landscape.
final
autoHideDuration → Duration: How long controls stay visible after the last interaction before auto-hiding. Ignored when the player is paused or buffering.
final
backgroundColor → Color?: Background color shown while the player is initialising. Defaults to ColorScheme.surface.
final
builder → YoutubePlayerBuilder?: Provide this to fully replace the default controls overlay.
final
controller → YoutubePlayerController: Controls the player. Create via YoutubePlayerController.fromVideoId or YoutubePlayerController. YouTube's native controls are always hidden regardless of YoutubePlayerParams.showControls.
final
enableFullScreenOnVerticalDrag → bool: Enable swiping up/down on the player to toggle fullscreen.
final
gestureRecognizers → Set<Factory<OneSequenceGestureRecognizer>>: Gesture recognizers passed to the underlying WebViewWidget.
final
hashCode → int: The hash code for this object.
no setterinherited
keepAlive → bool: Whether to keep the player alive when scrolled off-screen.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<YoutubePlayer>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited