How to show circular indicator on flutter chewie player on network loss

Question

I am working on a project where I am using flutter chewie player for playing videos. But when there is no network (or when I turned off the internet), it is showing an error as:

VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: Source error, null, null

Instead of this error, I want to show a circular indicator on network loss and want to resume playing when network is restored. How to implement this?

My chewie controller is below:

    chewieController = ChewieController(
        videoPlayerController: _videoPlayerController,
        aspectRatio: 16 / 9,
        autoPlay: true,
        looping: false,
        startAt: Duration(seconds: timeWatched),
        errorBuilder: (context, errorMessage) {
          return Center(
            child: Text(
              errorMessage,
              style: TextStyle(color: Colors.white),
            ),
          );
        },
        showControls: true,
        allowFullScreen: true,
        fullScreenByDefault: false,
        customControls: CupertinoControls(
          backgroundColor: Colors.black,
          iconColor: COLORS['PRIMARY_COLOR'],
        ));```

Answer 1

You can use connectivity_plus package from pub.dev, and listen to the change in user's device connectivity.

@override
initState() {
  super.initState();

  subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
    // Got a new connectivity status!
  })
}

You can perform different operations whenever the device connectivity status changes. Like showing CircularProgressIndicator() when status changes to ConnectivityResult.none and resume playing (hide indicator) when status changes to ConnectivityResult.wifi or ConnectivityResult.mobile.

Don't forget to dispose the subscription:

@override
  void dispose() {
    subscription.cancel();
    super.dispose();
  }