So I am using the video_player package in my Flutter project and have made use of VideoProgressIndicator and it works exactly as intended:
Widget progBar(BuildContext context) {
return VideoProgressIndicator(
_controller,
allowScrubbing: true, // user can touch/drag bar to change position of video.
colors: VideoProgressColors(playedColor: Colors.red, bufferedColor: Colors.white),
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 9),
);
}
The issue:
I have the timestamp(s) of the video as part of the player and when the user uses the VideoProgressIndicator to change the position of the video, I don't have the new position of the video so that I can update the timestamp(s).
My question:
How can I get the new position of the video when the VideoProgressIndicator changes it?
Thank You!
Ok so I figured out my solution to be simply to create a custom progress bar that manipulates a timer.
Related
I have a .m3u8 video URL that works perfectly when played on a browser player and continously shows the live video.
However with video_player on Flutter, after initializing the video controller, only about 20 or so seconds is available in the player, and when reaching the end of it, it does not continue playing and stops playing the video as if it is a limited 20 second video.
If I want to see the next few seconds or closer to the live feed, I need to dispose and reinitalize the controller.
I don't see this issue posted anywhere so where am I going wrong?
videoPlayerController = VideoPlayerController.network('https://example.com/abcdef.m3u8');
(videoPlayerController.value.isInitialized)
?
Expanded(
child: VideoPlayer(
videoPlayerController,
),
)
: Text('Nope'),
SizedBox(
height: screenHeight * 0.1,
),
SizedBox(
width: screenHeight * 0.2,
child: FloatingActionButton(
heroTag: 'Start',
onPressed: () async {
await videoPlayerController.initialize();
videoPlayerController.play();
home.notifyListeners();
},
child: const Text('Start'),
),
),
I found the reason why I have been experiencing this problem.
In my testing I have also setup RTMP streaming through the camera plugin, and I had that on while I tried to fetch the HLS video. I thought both are unrelated so it shouldn't affect anything but perhaps they both use a same library, so that's why the issue. With no streaming being done, the HLS video plays normally as expected.
Dependency : html_editor_enhanced: ^2.4.0+1
HtmlEditor(
controller: controller,
htmlEditorOptions: HtmlEditorOptions(
darkMode: true,
initialText: _phase!.value,
hint: "Enter you information",
autoAdjustHeight: false,
shouldEnsureVisible: true,
webInitialScripts:
UnmodifiableListView([
WebScript(
name: "editorBG",
script:"document.getElementsByClassName('note-editable')[0].style.backgroundColor='blue';"),
WebScript(
name: "height",
script: """
var height = document.body.scrollHeight;
window.parent.postMessage(JSON.stringify({"type": "toDart: height", "height": height}), "*"); //,"color":'white'
"""),
]
)
),
htmlToolbarOptions:
const HtmlToolbarOptions(
// toolbarItemHeight: 90.0,
// gridViewHorizontalSpacing: 0.1,
// gridViewVerticalSpacing: 0.1,
toolbarPosition: ToolbarPosition.aboveEditor,
toolbarType: ToolbarType.nativeGrid
),
otherOptions: OtherOptions(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(10.0),
border: Border.all(
color: const Color.fromRGBO(244, 248, 248, 1),
width: 2),
),
),
);
If I click alert dialog(image choose) cancel or ok button, then click goes to editor only which is placed under dialog box. please confirm what other dependency is compatible for this... also this is flutter inbuild widget which they already wrap it with PointerInterceptor... but still it is not working
Problem:
html_editor_enhanced uses an HtmlElementView to display the editor and the HtmlElementView consume mouse events before Flutter gets to consume the events.
When overlaying Flutter widgets on top of HtmlElementView widgets that
respond to mouse gestures (handle clicks, for example), the clicks
will be consumed by the HtmlElementView, and not relayed to Flutter.
The result is that Flutter widget's onTap (and other) handlers won't
fire as expected, but they'll affect the underlying webview.
Source: pointer_interceptor docs
Solution:
Wrap the dialog widget with a PointerInterceptor from the pointer_interceptor package.
From the docs:
PointerInterceptor is a widget that prevents mouse events (in web)
from being captured by an underlying HtmlElementView.
So if your dialog code was this previously:
AlertDialog(
content: Container(
...
)
)
You should update it to this:
PointerInterceptor(
AlertDialog(
content: Container(
...
)
)
)
I've been having a similar issue, but I found this https://github.com/flutter/flutter/issues/54027#issuecomment-797757996
Try running your flutter app with "--web-renderer html".
if you face an error after ok or cancel you should clear focus before the dialog/page closed use the below function, first create a controller for the htmleditor
editorController.clearFocus();
i needs zoomable image slider with cached network image something like this:
user can zoom on it and back
You can try this plugin from Flutter to create the slider "Carousel Slider"
https://pub.dev/packages/carousel_slider
and Include photos in Photo view widget
PhotoView(
imageProvider: AssetImage(photos),
backgroundDecoration: BoxDecoration(color: Colors.white),
),
I'm currently working over an app similar to good old Tamagotchi with modern twists. Right now I prepared some code and didn't need any character animations but now I'm stuck. I want to make a scaffold with title, line of buttons below it, yet still on top of the screen, second bunch on bottom and create some kind of interactivity inside between those two, with character made from assets, some animations and reactions on touch. To be clear - something like this:
class _AnimationState extends State<Animation> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
"some title here"
),
body:
Column(
children: [
Row(here some buttons)
Column(with animation, height as was left on screen)
Row(another line of buttons)
],
),
);
}
}
I was thinking about flame engine, found even tutorial, but when I'm trying to implement it i receive exception
The method '_mulFromInteger' was called on null. Receiver: null Tried
calling: _mulFromInteger(0)
This is a tutorial I worked on:
https://medium.com/flutter-community/sprite-sheet-animations-in-flutter-1b693630bfb3
And code i tried to implement:
Center(
child:
Flame.util.animationAsWidget(Position(70, 70),
animation.Animation.sequenced('minotaur.png', 5, textureWidth: 50),
),
),
The other idea was to use Sprite Widget but I never used any animations in my previous projects, nor in Flutter, C# or whatever language i had in college.
I would appreciate any advices, tutorials or examples how to handle animation from assets.
That tutorial is quite old, a lot has happened in the world of Flame since then.
I'm guessing you are using version 1.0.0-rc9 of Flame?
Something like this should work with the that version:
final animationData = SpriteAnimationData.sequenced(
amount: 5, stepTime: 1.0, textureSize: Vector2.all(50));
final spriteAnimation = await SpriteAnimation.load(
'minotaur.png' animationData);
...
Center(
child: SpriteAnimationWidget(
animation: spriteAnimation,
playing: true,
anchor: Anchor.center,
),
)
An example of it can be found here.
There is also some short documentation for it here.
I implemented SlideTransition for a widget in flutter, and it slides in as expected. The issue is that before the animation is called, the space where the slider is going to be displayed later is empty.
How can I make the parent to give this space to other widgets in the layout until the moment that a slider comes into view?
I was thinking about giving a slider the initial height of zero, but then the widgets inside the slider would act funny as the height changes in sync with sliding. I wonder if there is a simpler way.
The parent is:
new Scaffold(
appBar: _appBar,
body: new Column(
children: <Widget>[
new Expanded(
child: _body;
}),
),
new SlideTransition(
position: _sliderPosition, //
child: _slider,
),
],
);
And the position is defined as:
_sliderPosition = new MaterialPointArcTween(
begin: const Offset(0.0, 1.0),
end: Offset.zero,
).animate(_animationController);
I solved this issue by replacing _slider with _buildSlider() which returns null until a slider is needed.
This is also better for performance as there is no need to render a slider if it's hidden.
Bumped into the same issue with a SlideTransition taking the full height during a vertical slide. In the end I achieved the slide effect by using a SizeTransition instead, and setting its axisAlignment property accordingly (-1, 0, 1 for top/center/bottom in my case).