Building a Cross-Platform Media Player with just_audio and video_player in Flutter

Getting Started

First, add dependencies in your pubspec.yaml: just_audio for audio streaming and video_player for video playback. Then run flutter pub get to fetch packages. Import both libraries in your Dart file.

// pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  just_audio: ^0.9.35
  video_player

In your Dart code:

import 'package:just_audio/just_audio.dart';
import 'package:video_player/video_player.dart';

Make sure to request platform permissions if you stream local files on mobile.

Audio Playback with just_audio

just_audio provides a simple API for playlists, buffering, and gapless playback. Start by creating an AudioPlayer instance. Use setUrl() for remote streams or setFilePath() for local files. Handle player state changes to update UI.

final audioPlayer = AudioPlayer();

Future<void> initAudio() async {
  await audioPlayer.setUrl('https://example.com/audio.mp3');
  audioPlayer.play();
}

// Listen to position and duration
audioPlayer.positionStream.listen((pos) => print('Position: $pos'));

Pause, seek, and stop methods are similarly straightforward. Always dispose the player in dispose() to free native resources.

Video Playback with video_player

video_player delivers a native video surface on mobile and HTML video on web. Instantiate a VideoPlayerController with a network, asset, or file source. Call initialize() to load metadata, then use VideoPlayer(widget) to render.

class VideoScreenState extends State<VideoScreen> {
  late VideoPlayerController controller;

  @override
  void initState() {
    super.initState();
    controller = VideoPlayerController.network(
      'https://example.com/video.mp4'
    )..initialize().then((_) => setState(() {}));
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

Once initialized, call controller.play(), pause(), and seekTo(). You can loop playback or listen to completion events.

Building the UI

Leverage Flutter widgets to build a unified media interface. Use Slider for progress, IconButton for play/pause, and AspectRatio for video display. Wrap both audio and video controls in a Column or Stack to switch modes.

Widget build(BuildContext context) {
  return Column(
    children: [
      if (videoController.value.isInitialized)
        AspectRatio(
          aspectRatio: videoController.value.aspectRatio,
          child: VideoPlayer(videoController),
        ),
      Slider(
        value: audioPlayer.position.inSeconds.toDouble(),
        max: audioPlayer.duration?.inSeconds.toDouble() ?? 1,
        onChanged: (val) => audioPlayer.seek(Duration(seconds: val.toInt())),
      ),
      Row(
        children: [
          IconButton(
            icon: Icon(audioPlayer.playing ? Icons.pause : Icons.play_arrow),
            onPressed: () => audioPlayer.playing ? audioPlayer.pause() : audioPlayer.play(),
          ),
          IconButton(
            icon: Icon(Icons.video_library),
            onPressed: () => setState(() => showVideo = !showVideo),
          ),
        ],
      ),
    ],
  );
}

Toggle between audio-only and video mode with a boolean flag. Use StreamBuilders to rebuild controls when streams emit new events.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By combining just_audio and video_player, you can build a versatile, cross-platform media player in Flutter. This approach gives you fine-grained control over playback, buffering, and UI customization. Extend this foundation with playlists, custom renderers, and background audio handling to create fully featured media apps that run seamlessly on mobile, web, and desktop.