# Using ByteArk Player SDK for Flutter

This walkthrough shows how to embed ByteArkPlayer into your Flutter widget tree, control playback, and receive events through ByteArkPlayerController. For details on each Option / API / Event, see the linked reference pages.

# 1. Create a controller and listener

ByteArkPlayerController is used to control the player (play/pause/seek/setAudio/etc.) and to deliver events through ByteArkPlayerListener.

class _MyPlayerScreenState extends State<MyPlayerScreen> {
  late ByteArkPlayerController _controller;
  @override
  void initState() {
    super.initState();
    final listener = ByteArkPlayerListener(
      onPlayerReady: () => debugPrint("Player ready"),
      onPlaybackPlay: () => debugPrint("Playback started"),
      onPlaybackPause: () => debugPrint("Playback paused"),
      onPlaybackError: (error) => debugPrint("Error: ${error.message}"),
    );
    _controller = ByteArkPlayerController(listener: listener);
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

See Event Listeners Reference for all callbacks of ByteArkPlayerListener.

# 2. Build a ByteArkPlayerItem

ByteArkPlayerItem describes the video to play.

final playerItem = ByteArkPlayerItem(
  url: "<MEDIA_URL>",
  title: "Big Buck Bunny",
  mediaId: "VIDEO_ID",
);

1
2
3
4
5

# 3. Build a ByteArkPlayerConfig

final config = ByteArkPlayerConfig(
  licenseKey: ByteArkPlayerLicenseKey(
    android: "<ANDROID_LICENSE_KEY>",
    iOS: "<IOS_LICENSE_KEY>",
  ),
  playerItem: playerItem,
  autoPlay: true,
  control: true,
  seekButtons: true,
  fullScreenButton: true,
  settingButton: true,
);

1
2
3
4
5
6
7
8
9
10
11
12

See Options for all ByteArkPlayerConfig and ByteArkPlayerItem properties.

Use the ByteArkPlayer widget with the playerConfig and controller.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        AspectRatio(
          aspectRatio: 16 / 9,
          child: ByteArkPlayer(
            playerConfig: config,
            controller: _controller,
          ),
        ),
        ElevatedButton(
          onPressed: _controller.pause,
          child: const Text("Pause"),
        ),
      ],
    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 5. Call player APIs

Common API calls:

_controller.play();
_controller.pause();
_controller.togglePlayback();
_controller.seekTo(60_000);              // Go to 1:00 (milliseconds)
_controller.setPlaybackSpeed(1.5);       // 1.5x speed
_controller.toggleFullScreen();

1
2
3
4
5
6

See API Reference for all ByteArkPlayerController methods.

Advertisement — Google IMA SDK / VAST / VMAP
Content Protection — Widevine, FairPlay, HLS ClearKey
ByteArk Lighthouse — Analytics

← Installation Options →

# Using ByteArk Player SDK for Flutter

# 1. Create a controller and listener

# 2. Build a ByteArkPlayerItem

# 3. Build a ByteArkPlayerConfig

# 4. Embed the ByteArkPlayer widget

# 5. Call player APIs

# Related topics