Using a CachedVideoPlayer in a listview

Issue

I am attempting to show videos in a listview that is preventing me from declaring the videocontroller in the initState. This causes me to accidentally be redrawing the video multiple times during the application. I am receiving this error:

FATAL EXCEPTION: ExoPlayerImplInternal:Handler

then

java.lang.OutOfMemoryError: OutOfMemoryError thrown while trying to throw OutOfMemoryError; no stack trace available

with my current implementation. It appears to work fora while but the memory slowly builds up until it is full. How can I implement this differently?

here is the code I am calling in the stream:

 Widget getVideoItem(DocumentSnapshot doc) {
    if (watchList.contains(doc['user'])) watched = true;
    DateTime dateTime = DateTime.parse(doc['time']);

    _videoPlayerController = CachedVideoPlayerController.network(doc["downUrl"])
      ..initialize();
    _videoPlayerController.setLooping(true);
    _videoPlayerController.play();

    volumeOn = sharedPreferences.getBool("vidVol");
    if (volumeOn == null) {
      sharedPreferences.setBool("vidVol", false);
      volumeOn = false;
    }

    if (volumeOn) {
      _videoPlayerController.setVolume(1.0);
    } else {
      _videoPlayerController.setVolume(0.0);
    }

    return new FutureBuilder(
      future: getUserData(doc["user"]),
      builder: (BuildContext context, snapshot) {
        return SizedBox(
          height: MediaQuery.of(context).size.width + 140,
          width: MediaQuery.of(context).size.width,
          child: Column(children: <Widget>[
            new ListTile(
              title: new Text(userInfo),
              subtitle: new Text(doc["title"]),
              leading: FutureBuilder(
                  future: getProfUrl(doc),
                  builder: (BuildContext context, snapshot) {
                    Widget child;
                    if (!snapshot.hasData) {
                      child = _showCircularProgress();
                    } else {
                      child = child = new Container(
                        width: 44.0,
                        height: 44.0,
                        child: CachedNetworkImage(
                          imageUrl: doc["profUrl"],
                          imageBuilder: (context, imageProvider) => Container(
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              image: DecorationImage(
                                image: imageProvider,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ),
                      );
                    }
                    return child;
                  }),
            ),
            new Padding(
              padding: EdgeInsets.fromLTRB(4, 4, 4, 4),
              child: FutureBuilder(
                  future: getDownUrl(doc),
                  builder: (BuildContext context, snapshot) {
                    List<Widget> children;
                    if (!snapshot.hasData) {
                      children = [_showCircularProgress()];
                    } else {
                      children = [
                        Center(
                          child: new AspectRatio(
                            aspectRatio: 1 / 1,
                            child: Stack(
                              children: [
                                VisibilityDetector(
                                    key: Key("unique key"),
                                    onVisibilityChanged: (VisibilityInfo info) {
                                      if (info.visibleFraction > .20) {
                                        _videoPlayerController.pause();
                                      } else {
                                        _videoPlayerController.play();
                                      }
                                    },
                                    child: CachedVideoPlayer(
                                      _videoPlayerController,
                                    )),
                                IconButton(
                                  icon: volumeOn
                                      ? Icon(Icons.volume_up)
                                      : Icon(Icons.volume_off),
                                  onPressed: () {
                                    setState(() {
                                      _videoPlayerController.pause();
                                      sharedPreferences.setBool(
                                          "vidVol", !volumeOn);
                                    });
                                  },
                                ),
                              ],
                            ),
                          ),
                        )
                      ];
                    }

                    return Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: children,
                      ),
                    );
                  }),
            ),
            new Row(
              children: [
                new IconButton(
                    icon: !watched
                        ? new Icon(
                            Icons.remove_red_eye,
                            color: Colors.black26,
                          )
                        : new Icon(
                            Icons.remove_red_eye,
                            color: Colors.blueGrey[400],
                          ),
                    onPressed: () {
                      initToggleWatched(watchList, doc["user"], name, position,
                          secPosition, state, year, user);
                    }),
                Padding(
                  padding: EdgeInsets.fromLTRB(5, 0, 0, 0),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      dateTime.day.toString() +
                          "/" +
                          dateTime.month.toString() +
                          "/" +
                          dateTime.year.toString(),
                      style: TextStyle(color: Colors.black26, fontSize: 12),
                    ),
                  ),
                ),
              ],
            )
          ]),
        );
      },
    );
  }

Solution

Try making the widget with a controller a separate StatefullWidget instead of putting everything in one place and manage the instantiation and disposal of the controller in the initState() and dispose() methods.

Answered By – Abhinand Valasseri

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *