How to pause a video from another widget in flutter

Viewed 727

So I have a project here that displays large amounts of images and videos, the problem is that when the user is scrolling and a video is playing at the same time, it really ruins the performance of the entire app and the FPS drops from 60 to around 30. I think the way of fixing this is just pausing the video while the user is scrolling. How could I go about getting it to do this?

I'm using this plugin for the video: https://pub.dev/packages/video_player

This is the parent component, with the video widget inside it, so as you can see, it just loops through an array and displays pictures and images. What I want to know is: how to let the video widget know whether the user is scrolling or not, and inside of the video widget there is a pause and play method, so depending on whether the user is scrolling or not, it will pause/play

(FeedVideoItem = video widget)

Parent Widget:

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
              if (loaded)
            if (_feedDatas.length > 1)
              for (var item in _feedDatas)
                if (item.isImage)
                  FeedImageItem(
                    item: item,
                  )
                else
                // VIDEO WIDGET
                  new FeedVideoItem(videoData: item)
            else
              Center(child: Text('Loading, do hot restart to display')),
          ],
        ),
      ),
    );
  }

Video Widget (FeedVideoItem):

class FeedVideoItem extends StatefulWidget {
  final videoData;

  FeedVideoItem({this.videoData}) : super();

  @override
  _FeedVideoItemState createState() => _FeedVideoItemState(videoData);
}

class _FeedVideoItemState extends State<FeedVideoItem> {
  FeedItem item;
  _FeedVideoItemState(this.item);

  VideoPlayerController _controller;
  bool startedPlaying = false;

  Future<void> initialiseVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(item.url);
    initialiseVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    _controller.setVolume(1.0);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 15.0),
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              FutureBuilder(
                future: initialiseVideoPlayerFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    return InkWell(
                      onTap: () {
                        setState(() {
                          if (_controller.value.isPlaying) {
                            _controller.pause();
                          } else {
                            _controller.play();
                          }
                        });
                      },
                      child: AspectRatio(
                        aspectRatio: _controller.value.aspectRatio,
                        child: VideoPlayer(_controller),
                      ),
                    );
                  } else {
                    //TODO: Add placeholder image
                  }
                },
              ),
              InkWell(
                child: Icon(
                  _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
                  color: Colors.white,
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}
0 Answers
Related