How to check when my widget screen comes to visibility in flutter like onResume in Android

Question

In android if an activity is visible onResume is called. What is the equivalent method of onResume in Flutter?

I need the know when my widget screen is visible so I can auto-play a video based on that. I might go to another widget screen an when I come back it should auto-play.

My approach was to play the video in didUpdateWidget but didUpdateWidget is called every-time even the widget screen is not visible.

Note: I'm not asking about didChangeAppLifecycleState from WidgetsBindingObserver as it gives onResume etc callbacks for the app lifecycle not a particular widget screen.

Answer 1

I struggled to get a video to pause when not viewing the main screen of my app. I applied this VisibilityDetector and grabbed the visiblePercentage to force a pause or resume:

VisibilityDetector(     key: Key('visible-video--key-${this.randomkeygenerator}-1'),     onVisibilityChanged: (visibilityInfo) {       var visiblePercentage = visibilityInfo.visibleFraction * 100;        if (visiblePercentage < 1){ //the magic is done here         if(_video_controller != null) {           if(disposed_vid == false) {             _video_controller.pause();           }         }        }else{         if(_video_controller != null) {           if(disposed_vid == false) {             _video_controller.play();           }         }       }       debugPrint(           'Widget ${visibilityInfo.key} is ${visiblePercentage}% visible');     },     child: VideoPlayer(_video_controller)),     @override   void dispose() {     // If the video is playing, pause it.     _video_controller .pause();     _video_controller .dispose();     disposed_vid = true;     super.dispose();   } 

Answer 2

All of the problems are solved.

Put an observer on the navigator from the root of the widget tree (materialappwidget).

If you need more explanation please follow this link: https://api.flutter.dev/flutter/widgets/RouteObserver-class.html

I have implemented in my project and its working great @Sp4Rx

// Register the RouteObserver as a navigation observer. final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();  void main() {   runApp(MaterialApp(     home: Container(),     navigatorObservers: [routeObserver],   )); }  class RouteAwareWidget extends StatefulWidget {   State<RouteAwareWidget> createState() => RouteAwareWidgetState(); }  // Implement RouteAware in a widget's state and subscribe it to // the // RouteObserver. class RouteAwareWidgetState extends State<RouteAwareWidget> with RouteAware {   @override   void didChangeDependencies() {     super.didChangeDependencies();     routeObserver.subscribe(this, ModalRoute.of(context));   }    @override   void dispose() {     routeObserver.unsubscribe(this);     super.dispose();   }    @override   void didPush() {     // Route was pushed onto navigator and is now topmost route.   }    @override   void didPopNext() {     // Covering route was popped off the navigator.   }    @override   Widget build(BuildContext context) => Container(); }