YPlayer
YPlayer is a Flutter package that provides an easy-to-use YouTube video player widget. It leverages the power of the youtube_explode_dart
package for fetching video information and the chewie
package for a customizable video player interface.
Features
- Play YouTube videos directly in your Flutter app
- Responsive layout that adapts to different screen sizes
- Support for fullscreen mode
- Customizable aspect ratio
- Optional autoplay
- Muting control
- Customizable loading and error widgets
- Easy to use API with play, pause, and stop functionality
- Callback support for player state changes and progress updates
- Customizable progress bar colors for Android and iOS
- Improved handling of app lifecycle changes and fullscreen mode
- Enhanced error handling and recovery
Installation
Add y_player
to your pubspec.yaml
file:
dependencies:
y_player: ^1.1.0
Then run:
flutter pub get
Usage
Here's a simple example of how to use YPlayer in your Flutter app:
import 'package:flutter/material.dart';
import 'package:y_player/y_player.dart';
class MyVideoPlayer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('YPlayer Example')),
body: YPlayer(
youtubeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
onStateChanged: (status) {
print('Player Status: $status');
},
onProgressChanged: (position, duration) {
print('Progress: ${position.inSeconds}/${duration.inSeconds}');
},
onControllerReady: (controller) {
print('Controller is ready!');
},
),
);
}
}
Using YPlayerController
You can get more control over the player by using YPlayerController
:
class MyVideoPlayerPage extends StatefulWidget {
@override
_MyVideoPlayerPageState createState() => _MyVideoPlayerPageState();
}
class _MyVideoPlayerPageState extends State<MyVideoPlayerPage> {
late YPlayer _yPlayer;
YPlayerController? _controller;
@override
void initState() {
super.initState();
_yPlayer = YPlayer(
youtubeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
onControllerReady: (controller) {
setState(() {
_controller = controller;
});
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('YPlayer Controller Example')),
body: Column(
children: [
Expanded(child: _yPlayer),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () => _controller?.play(),
child: Text('Play'),
),
ElevatedButton(
onPressed: () => _controller?.pause(),
child: Text('Pause'),
),
ElevatedButton(
onPressed: () => _controller?.stop(),
child: Text('Stop'),
),
],
),
],
),
);
}
}
Migrating to 1.1.0
Version 1.1.0 introduces a new controller-based functionality that improves handling of app lifecycle changes and fullscreen mode. Here are the key changes:
-
The
YPlayer
widget now has anonControllerReady
callback that provides theYPlayerController
when it's fully initialized. -
Instead of calling
getController()
on theYPlayer
instance, you should now use theonControllerReady
callback to get the controller. -
The
YPlayerController
is now more robust, handling re-initialization when the app comes back from the background or exits fullscreen mode.
To migrate your existing code:
// Old way
late YPlayer _yPlayer;
late YPlayerController _controller;
@override
void initState() {
super.initState();
_yPlayer = YPlayer(youtubeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
_controller = _yPlayer.getController();
}
// New way
late YPlayer _yPlayer;
YPlayerController? _controller;
@override
void initState() {
super.initState();
_yPlayer = YPlayer(
youtubeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
onControllerReady: (controller) {
setState(() {
_controller = controller;
});
},
);
}
Make sure to null-check the controller before using it, as it might not be immediately available.
API Reference
YPlayer
Constructor:
YPlayer({
Key? key,
required String youtubeUrl,
double? aspectRatio,
bool autoPlay = true,
bool allowFullScreen = true,
bool allowMuting = true,
Widget? placeholder,
Widget? loadingWidget,
Widget? errorWidget,
YPlayerStateCallback? onStateChanged,
YPlayerProgressCallback? onProgressChanged,
Function(YPlayerController controller)? onControllerReady,
ChewieProgressColors? materialProgressColors,
ChewieProgressColors? cupertinoProgressColors,
})
Properties:
youtubeUrl
: The URL of the YouTube video to play.aspectRatio
: The aspect ratio of the video player. If null, it uses the video's natural aspect ratio.autoPlay
: Whether to autoplay the video when it's ready.allowFullScreen
: Whether to allow fullscreen mode.allowMuting
: Whether to allow muting the video.placeholder
: The placeholder widget to display before the video is initialized.loadingWidget
: The widget to display when the video is loading.errorWidget
: The widget to display when there's an error loading the video.onStateChanged
: Callback function triggered when the player's status changes.onProgressChanged
: Callback function triggered when the player's progress changes.onControllerReady
: Callback function triggered when the player controller is ready.materialProgressColors
: The colors to use for the progress bar on Android.cupertinoProgressColors
: The colors to use for the progress bar on iOS.
YPlayerController
Methods:
play()
: Starts or resumes video playback.pause()
: Pauses video playback.stop()
: Stops video playback and resets to the beginning.
Properties:
status
: Gets the current status of the player (YPlayerStatus enum).position
: Gets the current playback position (Duration).duration
: Gets the total duration of the video (Duration).isInitialized
: Returns true if the player is fully initialized.
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.