YouTube Player Pro for Flutter #

A powerful and customizable YouTube player package for Flutter with fullscreen support, custom controls, and seamless WebView integration.

🎬 Preview #

▶️ Watch Demo Video on YouTube

Features #

✨ Rich Feature Set

• 🎥 Play YouTube videos using WebView
• 📺 Fullscreen mode with landscape orientation
• 🎨 Beautiful custom player controls
• 🔊 Volume control (mute/unmute)
• ⏯️ Playback controls (play, pause, stop)
• ⏭️ Seek controls (forward/backward 10 seconds)
• 📊 Real-time progress bar
• 🎬 Player state management
• 🖼️ Video thumbnail generation
• 🔗 URL to video ID extraction
• ⚙️ Customizable YouTube player settings
• 🚪 Always-visible exit button in fullscreen
• 🌐 Cross-platform support (iOS, Android, Web, macOS, Linux, Windows)

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  youtube_player_pro: ^1.0.1

Then run:

flutter pub get

Platform-Specific Setup #

Android #

Add the following to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS #

Add the following to your ios/Runner/Info.plist:

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:youtube_player_pro/youtube_player.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      videoId: 'dQw4w9WgXcQ',
      autoPlay: true,
      showControls: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('YouTube Player')),
      body: YoutubePlayer(
        controller: _controller,
        enableFullscreen: true,
      ),
    );
  }

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

Advanced Usage with Custom Controls #

import 'package:flutter/material.dart';
import 'package:youtube_player_pro/youtube_player.dart';

class AdvancedPlayer extends StatefulWidget {
  @override
  _AdvancedPlayerState createState() => _AdvancedPlayerState();
}

class _AdvancedPlayerState extends State<AdvancedPlayer> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      videoId: 'L3NJkkOC4Ko',
      autoPlay: false,
      showControls: true,
      mute: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // YouTube Player
          YoutubePlayer(
            controller: _controller,
            enableFullscreen: true,
            backgroundColor: Colors.black,
          ),

          // Custom Controls
          ValueListenableBuilder(
            valueListenable: _controller,
            builder: (context, value, child) {
              return Column(
                children: [
                  // Progress Bar
                  Slider(
                    value: value.position.inSeconds.toDouble(),
                    max: value.duration.inSeconds.toDouble(),
                    onChanged: (val) {
                      _controller.seekTo(Duration(seconds: val.toInt()));
                    },
                  ),

                  // Control Buttons
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        icon: Icon(Icons.replay_10),
                        onPressed: () {
                          final newPos = value.position - Duration(seconds: 10);
                          _controller.seekTo(newPos);
                        },
                      ),
                      IconButton(
                        icon: Icon(
                          value.isPlaying ? Icons.pause : Icons.play_arrow,
                        ),
                        onPressed: () {
                          if (value.isPlaying) {
                            _controller.pause();
                          } else {
                            _controller.play();
                          }
                        },
                      ),
                      IconButton(
                        icon: Icon(Icons.forward_10),
                        onPressed: () {
                          final newPos = value.position + Duration(seconds: 10);
                          _controller.seekTo(newPos);
                        },
                      ),
                      IconButton(
                        icon: Icon(
                          value.volume > 0 ? Icons.volume_up : Icons.volume_off,
                        ),
                        onPressed: () {
                          if (value.volume > 0) {
                            _controller.setVolume(0);
                          } else {
                            _controller.setVolume(100);
                          }
                        },
                      ),
                      IconButton(
                        icon: Icon(Icons.fullscreen),
                        onPressed: () {
                          _controller.enterFullscreen();
                        },
                      ),
                    ],
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

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

Extract Video ID from URL #

String? videoId = YoutubeHelper.extractVideoId('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
// Returns: 'dQw4w9WgXcQ'

Get Thumbnail URL #

String thumbnailUrl = YoutubeHelper.getThumbnailUrl(
  'dQw4w9WgXcQ',
  quality: ThumbnailQuality.high,
);

API Reference #

YoutubePlayerController #

YoutubePlayerValue #

📸 Preview / معاينة #

Video Demo / فيديو توضيحي #

▶️ Watch Full Demo on YouTube

Features in Action / المميزات في العمل #

• ✅ YouTube video playback
• ✅ Custom player controls with beautiful UI
• ✅ Fullscreen mode with landscape orientation
• ✅ Volume control (mute/unmute)
• ✅ Seek controls (forward/backward)
• ✅ Real-time progress tracking
• ✅ Always-visible exit button in fullscreen

Screenshots #

Coming soon...

Example App #

Check out the example app for a complete implementation.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

If you like this package, please give it a ⭐ on GitHub!

Acknowledgments #

• Built with webview_flutter
• Uses YouTube iFrame API

Changelog #

See CHANGELOG.md for a detailed list of changes.