Embedding videos in Flutter apps brings life to static screens and connects users better with the content. Videos can showcase product features, tutorials, or engaging visuals without relying on external browsers.

Flutter provides flexible ways to integrate video playback uninterruptedly within the app"s user interface. Understanding how you can embed videos ensures smooth performance and delivers a rich & interactive user experience.

Prerequisites

  • Ensure Flutter is installed on your computer with a development setup like Android Studio or VS Code.
  • Prepare a video file, such as an MP4 from your device, or a direct URL from the web.
  • For online videos, confirm they are accessible without requiring a login.
  • Add the video_player package to your project by running "flutter pub add video_player" in the terminal; this package manages basic video playback.

Embedding Videos in Flutter Apps

Embedding videos in Flutter apps places playable media in your app"s interface and engages users without sending them outside the app. It helps present instructions, demonstrations, or visual content right where it"s needed. This makes the user experience feel connected to the flow of the screen.

Open a new terminal. Navigate to the directory where you want to create a new Flutter project using terminal commands.

Then, use the following command to create a new Flutter project:

code
flutter create example_project

You can replace example_project with any preferred project name.

Run:

code
cd example_project
flutter run

Adding Required Dependencies

Open the pubspec.yaml file and add video_player and chewie (an optional UI wrapper with better controls) under dependencies:

Visit the official package link for the latest version: https://pub.dev/packages/youtube_player_flutter

Your dependencies section should look like this:

code
dependencies:
flutter:
sdk: flutter
video_player: ^2.5.0
chewie: ^1.5.0

Be sure to replace ^latest_version with the current stable version of the package (for example, ^8.1.2). After editing the file, save the changes (Ctrl + S) and run:

code
flutter pub get

Note: Replace versions with the latest stable versions from pub.dev.

Banner for Video Embedding

Embed a Single Video

In your lib/ folder, replace the contents of main.dart with the following:

code
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
@override
_VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
late VideoPlayerController _controller;
late Future<void> _initializeVideoPlayerFuture;

@override
void initState() {
super.initState();
// Replace the URL below with your video URL, or use local asset.
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
);

_initializeVideoPlayerFuture = _controller.initialize();
_controller.setLooping(true);
}

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Video Demo',
home: Scaffold(
appBar: AppBar(title: Text('Embed Video Example')),
body: FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Center(
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
}

Enhanced Video Controls with chewie

To provide a richer user experience with features like full-screen toggle, playback speed control, and better UI, wrap your video_player with the chewie package.

Update your main.dart as follows:

code
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

void main() => runApp(VideoChewieApp());

class VideoChewieApp extends StatefulWidget {
@override
_VideoChewieAppState createState() => _VideoChewieAppState();
}

class _VideoChewieAppState extends State<VideoChewieApp> {
late VideoPlayerController _videoPlayerController;
late ChewieController _chewieController;

@override
void initState() {
super.initState();
_videoPlayerController = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
);

_chewieController = ChewieController(
videoPlayerController: _videoPlayerController,
aspectRatio: 16 / 9,
autoPlay: false,
looping: true,
// Additional options
allowFullScreen: true,
allowPlaybackSpeedChanging: true,
playbackSpeeds: [0.5, 1.0, 1.5, 2.0],
);
}

@override
void dispose() {
_videoPlayerController.dispose();
_chewieController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Chewie Video Player',
home: Scaffold(
appBar: AppBar(title: const Text('Chewie Video Player')),
body: Center(
child: Chewie(controller: _chewieController),
),
),
);
}
}

This setup provides a full-featured, customizable video player with native controls and enhanced features.

Playing Multiple Videos & Switching

To support multiple videos and switch between them, you can extend this approach by managing a list of video URLs and updating the controller accordingly.

Example Snippet for Switching between Videos:

code
List<String> videoUrls = [
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'
];
int currentIndex = 0;

void _loadVideo(int index) async {
currentIndex = index;
await _videoPlayerController.pause();
await _videoPlayerController.dispose();
_videoPlayerController = VideoPlayerController.network(videoUrls[currentIndex]);
await _videoPlayerController.initialize();
_chewieController = ChewieController(
videoPlayerController: _videoPlayerController,
aspectRatio: 16 / 9,
);
setState(() {});
}

Use buttons or UI elements to trigger _loadVideo with the desired index and refresh the player dynamically.