How to pause flutter video(video_player plugin) when navigating from page to another

Question

I'm using flutter video_player(https://pub.dartlang.org/packages/video_player) plugin to play videos. But When I navigate from one page to another in flutter the video is still playing. I'm having the same problem when playing music from any other app(eg: playing music from notification while flutter video is playing). How can I pause it?

Answer 1

Edit: Second option: So I came up with another solution. VisibilityDetector is a `Widget' that can wrap any other Widget and notify when the visible area of the widget changed.

VisibilityDetector(
   key: Key("unique key"),
   onVisibilityChanged: (VisibilityInfo info) {
       debugPrint("${info.visibleFraction} of my widget is visible");
       if(info.visibleFraction == 0){
           videoPlayerController.pause();
       }
       else{
           videoPlayerController.play();
       }
   },
   child: VideoPlayer());
)

---

First Option: By using the RouteObserver and RouteAware your widget will be informed whenever another screen is pushed on top of it, or it's popped back on top.

First, you need to add a RouteObserver to MaterialApp or your Navigator.

RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      navigatorObservers: [routeObserver], //HERE
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Then you must add the RouteAware mixin to your widget, and subscribe it to the RouteObserver.

class VideoPlayerItem extends StatefulWidget {
  final File file;

  VideoPlayerItem(this.file);

  @override
  _VideoPlayerItemState createState() => _VideoPlayerItemState();
}

class _VideoPlayerItemState extends State<VideoPlayerItem> with RouteAware {

  VideoPlayerController _videoPlayerController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.file(widget.file);
    _videoPlayerController.initialize().then((_) {
      if (mounted) {
        setState(() {});
        _videoPlayerController.play();
      }
    });
  }

  @override
  void didChangeDependencies() {
    routeObserver.subscribe(this, ModalRoute.of(context));//Subscribe it here
    super.didChangeDependencies();
  }

  /// Called when the current route has been popped off.
  @override
  void didPop() {
    print("didPop");
    super.didPop();
  }

  /// Called when the top route has been popped off, and the current route
  /// shows up.
  @override
  void didPopNext() {
    print("didPopNext");
    _videoPlayerController.play();
    super.didPopNext();
  }

  /// Called when the current route has been pushed.
  @override
  void didPush() { 
    print("didPush");
    super.didPush();
  }

  /// Called when a new route has been pushed, and the current route is no
  /// longer visible.
  @override
  void didPushNext() {
    print("didPushNext");
    _videoPlayerController.pause();
    super.didPushNext();
  }


  @override
  Widget build(BuildContext context) {
    return _videoPlayerController?.value?.initialized ?? false
        ? AspectRatio(
            aspectRatio: _videoPlayerController.value.aspectRatio,
            child: VideoPlayer(_videoPlayerController),
          )
        : Container();
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this); //Don't forget to unsubscribe it!!!!!!
    super.dispose();
    _videoPlayerController.dispose();
  }
}