Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to execute a function after a period of inactivity in Flutter

I need to create an app that navigates a user to after a period of inactivity.

I tried wrapping my app in GestureDetector and run a timer after a specified period as shown below but it is not working:

class _MyAppState extends State<MyApp> {
  Timer _timer;

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

    _initializeTimer();
  }

  void _initializeTimer() {
    _timer = Timer.periodic(const Duration(seconds: 20), (_) => _logOutUser);
  }

  void _logOutUser() {
Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => WelcomePage()));
    _timer.cancel();
  }

  void _handleUserInteraction([_]) {
    if (!_timer.isActive) {
      return;
    }

    _timer.cancel();
    _initializeTimer();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleUserInteraction,
      onPanDown: _handleUserInteraction,
      child: MaterialApp(
        title: 'Hello',
        home: WelcomePage(),
        routes: <String, WidgetBuilder>{
          '/welcome': (BuildContext context) => new WelcomePage(),
          '/login': (BuildContext context) => new LoginPage(),
        },
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

My question is how best should I implement running a function after a period of inactivity within my flutter app?

like image 331
deantawonezvi Avatar asked Nov 20 '19 14:11

deantawonezvi


People also ask

How do I check user inactivity in flutter?

And a good way to do this is to use the mixin WidgetsBindingObserver on your LandingPage of the app. The mixin provides you with an enum AppLifecycleState which can have 4 values, detached, inactive, paused and resumed which depicts the current state of the app.


1 Answers

For people who want the strict answer to the question of the title ("How to execute a function after a period of inactivity in Flutter"), this is the complete solution:

  • Wrap your MaterialApp inside a GestureDetector so you can detect taps and pans.
  • In GestureDetector set following property to avoid messing with the standard gesture system:
    • behavior: HitTestBehavior.translucent
  • In GestureDetector set callbacks to restart timer when tap/pan activity happens:
    • onTap: (_) => _initializeTimer()
    • onPanDown: (_) => _initializeTimer()
    • onPanUpdate: (_) => _initializeTimer()
  • We should not forget that a typing user is also an active user, so we also need to setup callbacks in every TextField of the widget:
    • onChanged: (_) => _initializeTimer()
  • Add Timer _timer; to your class_SomethingState.
  • Finally, init _timer at initState(), write _initializeTimer() and write _handleInactivity() including your desired actions when enough inactivity happens:

    @override
    void initState() {
      super.initState();
      _initializeTimer();
    }

    // start/restart timer
    void _initializeTimer() {
      if (_timer != null) {
        _timer.cancel();
      }
      // setup action after 5 minutes
      _timer = Timer(const Duration(minutes: 5), () => _handleInactivity());
    }

    void _handleInactivity() {
      _timer?.cancel();
      _timer = null;

      // TODO: type your desired code here
    }
like image 189
Blackd Avatar answered Sep 22 '22 05:09

Blackd