I'm new with flutter and currently using better_player: ^0.0.81 package.
Is there anyway to stop the video using a controller? Here is my code below
late BetterPlayerController _betterPlayerController;
Function
_betterPlayerController = BetterPlayerController(
const BetterPlayerConfiguration(
autoPlay: true,
fit: BoxFit.contain,
controlsConfiguration: BetterPlayerControlsConfiguration(
enableOverflowMenu: false,
showControlsOnInitialize: false,
enableRetry: true,
showControls: true,
),
),
betterPlayerDataSource: BetterPlayerDataSource.file(videoPath),
);
Widget
AspectRatio(
aspectRatio: 16 / 9,
child: BetterPlayer(
controller: _betterPlayerController,
),
)
If you mean pause and play, then just call it by using the controller.
eg: _betterPlayerController.pause(); or _betterPlayerController.play();
Related
I want to add a Youtube video in my flutter web app , I tried Youtube_player_iframe and its not showing anything ..
here is my code :
void initState() {
super.initState();
_controller = YoutubePlayerController(
params: const YoutubePlayerParams(
showControls: true,
mute: false,
showFullscreenButton: true,
loop: false,
),
)..onInit = (){
_controller.loadVideoByUrl(mediaContentUrl: 'https://www.youtube.com/watch?v=5oZXNRQ0_Uo');
};
}
in the scaffold :
YoutubePlayerControllerProvider(controller: _controller, child: YoutubePlayer(
aspectRatio: 4/3,
controller: _controller,
)),
i found the solution just replace the
_controller.loadVideoByUrl(...);
to
_controller.loadVideo(...);
I have a map (Using flutter maps) that presents some layers that can be enabled or disabled by the user. For that I have two buttons to disable and enable these layers, and I'm controlling their state with a getX controller.
RxBool radar = false.obs;
RxBool satelite = false.obs;
I want when the user clicks on one of these buttons the layer related to it activates or deactivates.
So far so good, however, I want that when he activates the radas layer, the other layer remains without re-rendering and vice versa. What is happening is that when the user activates/deactivates a layer, the map component re-renders and ends up causing the other layer to reload its content.
GetX<MenuController>(
init: MenuController(),
builder: (menuController) {
return FlutterMap(
options: MapOptions(),
layers: [
if (menuController.radar.value) //Handle True or false
TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: "MyUrlLocales",
),
),
if (menuController.satelite.value) //Handle True or false
TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: "MyUrlCars",
),
),
],
);
},
),
Obviously this happens because you have given GetX to the whole FlutterMap
create a controller for MenuController
var _controller = Get.put(MenuController());
and
FlutterMap(options: MapOptions(), children: [
Obx(
() => Visibility(
visible: _menuController.radar.value,
child: TileLayerWidget(
options: TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: "MyUrlLocales",
),
),
),
),
),
Obx(
() => Visibility(
visible: menuController.satelite.value,
child: TileLayerWidget(
options: TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: "MyUrlCars",
),
),
),
),
),
]),
You can do something like this :
var _controller = MenuController();
And in your build function let's say you want to update one widget runtime you can do something like this,
FlutterMap(
options: MapOptions(),
layers: [
if (menuController.radar.value) //Handle True or false
Obx(()=> TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: "MyUrlLocales",
),
)),
if (menuController.satelite.value) //Handle True or false
TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: "MyUrlCars",
),
),
],
)
So you need to wrap the widget with Obx() which you want to update runtime.
I am basically trying to prevent the user from rewinding or forwarding the video via progress slider but user should still be able to pause and play the video and see how many seconds/minutes remains till the end of the video.
How can i achieve this using Chewie package in Flutter?
#override
void initState() {
super.initState();
_chewieController = ChewieController(
videoPlayerController: widget.vpController,
aspectRatio: widget.vpController.value.aspectRatio,
autoInitialize: true,
allowFullScreen: true,
allowPlaybackSpeedChanging: false,
deviceOrientationsAfterFullScreen: [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown],
showControls: true,
playbackSpeeds: [1.0],
showOptions: false,
errorBuilder: ((context, errorMessage) {
return Center(
child: Text(errorMessage),
);
})
);
}
you can did it by use customControls property in ChewieController
_chewieController = ChewieController(
videoPlayerController: _videoPlayerController!,
allowFullScreen: false,
showOptions: false,
looping: false,
autoPlay: true,
hideControlsTimer: const Duration(seconds: 1),
customControls: const CustomMaterialControls(
showPlayButton: false,
),
);
in CustomMaterialControls, just clone MaterialControls from chewie and you will see that a function called _buildProgressBar()
Widget _buildProgressBar() {
return Expanded(
child: VideoProgressBar(
controller,
colors: chewieController.materialProgressColors ??
ChewieProgressColors(
playedColor: Theme.of(context).colorScheme.secondary,
handleColor: Theme.of(context).colorScheme.secondary,
bufferedColor: Theme.of(context).backgroundColor.withOpacity(0.5),
backgroundColor: Theme.of(context).disabledColor.withOpacity(.5),
),
handleHeight: 0,
drawShadow: false,
barHeight: 4,
),
);
}
You can disable function onDragStart, onHorizontalDragUpdate in VideoProgressBar then you will get your expectation
onHorizontalDragStart: (DragStartDetails details) {
if (!controller.value.isInitialized|| widget.disableDrag) {
return;
}
}
I have created a ChewieContoller which looks like this:
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio: 16/9,
autoInitialize: true,
autoPlay: true,
showOptions: false,
showControls: true,
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: const TextStyle(color: Colors.white),
),
);
},
);
Now showControls is set to true, but at some point I want to change it to false (I want to hide controls). But when I try to do something like this:
_chewieController.showControls = false;
Flutter gives an error saying 'showControls' can't be used as a setter because it's final.
Try finding a different setter, or making 'showControls' non-final.
Is there a way to change showControls propety?
Try creating a new instance with the same videoPlayerController.
_chewieController = ChewieController(
videoPlayerController: _chewieController.videoPlayerController,
aspectRatio: 16/9,
autoInitialize: true,
autoPlay: true,
showOptions: false,
showControls: true,
);
Actually, the carousel_slider have the pauseAutoPlayOnTouch that works perfectly but I'm working with a Stateless Widget component into the Stateful Widget. So, I'm trying to pause using the carousel_pro and I have no idea how to solve this.
There's a property called onImageTap and this can be the answer.
This is a part of the code where I set up the Carousel configs.
dotSpacing: 15.0,
dotColor: Colors.blueGrey[100],
dotIncreasedColor: Color.fromRGBO(203, 0, 0, 1),
autoplay: true,
autoplayDuration: Duration(seconds: 10),
indicatorBgPadding: 0.0,
dotBgColor: Colors.transparent,
borderRadius: true,
dotSpacing: 15.0,
dotColor: Colors.blueGrey[100],
dotIncreasedColor: Color.fromRGBO(203, 0, 0, 1),
autoplay: false,
indicatorBgPadding: 0.0,
dotBgColor: Colors.transparent,
borderRadius: true,
EDIT -
Providing the explanation-
You have to set the autoplay property when the imageTap event occurs. For this do the following steps
Add a class property bool isAutoPlayEnabled = true
In the CarouselOptions, set autoplay: isAutoPlayEnabled
onImageTap do setState(){ isAutoPlayEnabled = ! isAutoPlayEnabled; }
Now the widget tree will be recreated and the carousel page will be paused.
Another theory- i dont know if it will work or not - try wrapping the carousel with GestureDetector and use its onTap: to set the value of isAutoPlayEnabled