Flutter 中如何正确监听页面生命周期？

我在写一个 Flutter 页面，需要在进入和退出页面时执行一些操作，比如开始和停止计时器。但不知道该用哪个方法来监听页面的显示和隐藏状态。

试过 initState 和 dispose，但这两个只在页面创建和销毁时调用，而我需要的是每次页面切换到前台或后台时都能触发。查文档看到有 WidgetsBindingObserver，但具体怎么用不太清楚。

有没有人能给个简单的例子？比如监听页面 resume 和 pause 的完整写法？

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      print('页面回到前台');
    } else if (state == AppLifecycleState.paused) {
      print('页面进入后台');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}