How can use image & video on same frame in flutter?

user_18124547 0
Viewed 444

Updated below,

Now I used this methods, it was showed flatingactionbutton on all data, how to only show video data and could I click sizebox then it was playing video not click floatactionbutton and how to hidden floatactionbutton when the user click play video?

SizedBox(
                  height: MediaQuery.of(context).size.height * 0.35,
                  width: double.infinity,
                  child: widget.snap['imageType'] == 'image'
                      ? Image.network(
                          widget.snap['postimage'],
                          //widget.snap['postimage'],
                          fit: BoxFit.cover,
                        )
                      // : VideoPlayer(_controller),
                      : _controller.value.isInitialized
                          ? AspectRatio(
                              aspectRatio: _controller.value.aspectRatio,
                              child: VideoPlayer(_controller),
                            )
                          : Container(),
                ),
                FloatingActionButton(
                  backgroundColor: Colors.white38,
                  onPressed: () {
                    setState(() {
                      _controller.value.isPlaying
                          ? _controller.pause()
                          : _controller.play();
                    });
                  },
                  child: Icon(
                    _controller.value.isPlaying
                        ? Icons.pause
                        : Icons.play_arrow,
                  ),
                ),

How can use image & video on same frame in flutter?

I tried to used this methods, but I got the errors.

code

SizedBox(
                  height: MediaQuery.of(context).size.height * 0.35,
                  width: double.infinity,
                  child: widget.snap['imageType'] == 'image'
                      ? Image.network(
                          widget.snap['postimage'],
                          //widget.snap['postimage'],
                          fit: BoxFit.cover,
                        )
                      // : Image.network(widget.snap['profile_image']),
                      : VideoPlayerController.network(widget.snap['postimage']),
                ),

enter image description here

And this is error

enter image description here

flutter
2 Answers

First, initialize the video player controller and use like below.

VideoPlayerController _controller = VideoPlayerController.network(widget.snap['postimage'];

      SizedBox(
              height: MediaQuery.of(context).size.height * 0.35,
              width: double.infinity,
              child: widget.snap['imageType'] == 'image'
                  ? Image.network(
                      widget.snap['postimage'],
                      //widget.snap['postimage'],
                      fit: BoxFit.cover,
                    )
                  // : Image.network(widget.snap['profile_image']),
                  : VideoPlayer(_controller)
            ),
user_179814310

Hi you are getting error because you VideoPlayerController.network is an object and its not a widget i have updated your code you need to initialize videoplayercontroller enter image description here

class VideoExample extends StatefulWidget {
const VideoExample({Key? key}) : super(key: key);

@override
State<VideoExample> createState() => _VideoExampleState();
}

class _VideoExampleState extends State<VideoExample> {
VideoPlayerController? _controller;
String data = 'video';

@override
void initState() {
//GET SNAP DATA AND CHECK TYPE OF IMAGE OF NOT IMAGE THEN INITIALIZE 
//USING URL

super.initState();

if (data != 'image') {
  _controller = VideoPlayerController.network(
 'https://firebasestorage.googleapis.com/v0/b/campingee9d0.appspot.com'+
   '/o/videos%2F1632377430133.mp4?alt=media&token' +
     '=88b1d765-1fbf-490b-a7e0-3689e96454a9')
..initialize().then((_) {
   // Ensure the first frame is shown after the video is initialized, 
   //even before the play button has been pressed.
   setState(() {});
  });
 }
}

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

@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SizedBox(
   height: MediaQuery.of(context).size.height * 0.35,
   width: double.infinity,
   child: _controller?.value.isInitialized == true
    ? AspectRatio(
        aspectRatio: 16 / 9,
        child: VideoPlayer(_controller!),
      )
    : Container(),
 ),
 floatingActionButton: FloatingActionButton(
  onPressed: () {
  setState(() {
    if (_controller?.value.isInitialized == true) {
      _controller!.value.isPlaying
          ? _controller?.pause()
          : _controller?.play();
    }
  });
 },
 child: Icon(
     _controller!.value.isPlaying ? Icons.pause : Icons.play_arrow,
    ),
   ),
  );
 }
}
user_138914420
Related