Использование flutter HookWidget и didChangeAppLifecycleState

Question

Как я могу контролировать жизненный цикл состояние приложения от конкретной страницы с помощью HookWidget, как вы можете с виджетом Stateful?

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.paused) {
         ...
    }
    if (state == AppLifecycleState.resumed) {
        ...
    }
    if (state == AppLifecycleState.detached) {
       ...
    }
  }

Answer 1

Сначала создайте класс:

class MyObserver implements WidgetsBindingObserver {
}

Затем создайте его и зарегистрируйте с помощью:

Widget build(BuildContext) {
  useEffect(() {
    final observer = MyObserver();
    WidgetsBinding.instance.addObserver(observer);
    return () => WidgetsBinding.instance.removeObserver(observer);
  }, const []);

  ...
}

Answer 2

Крючки Flutter поставляются со встроенным didchangeapplifecycleполучить к нему доступ следующим образом

          final appLifecycleState = useAppLifecycleState();

    useEffect(() {
      print("current app state");
      print(appLifecycleState);
      if (appLifecycleState == AppLifecycleState.paused || appLifecycleState == AppLifecycleState.inactive) {
        //...
      } else if (appLifecycleState == AppLifecycleState.resumed) {
        //...
      }
      return null;
    }, [appLifecycleState]);

Answer 3

В документации здесь поиск «способов создать крюк». Вы увидите, что есть 2 способа создания ловушки: с помощью функции или класса. Вы собираетесь «использовать класс». Затем используйте переопределение initHook в качестве вашего initState и dispose работает так же. Вот как я это реализовал на своей стороне.

      import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

useWidgetLifecycleObserver(BuildContext context) {
  return use(const _WidgetObserver());
}

class _WidgetObserver extends Hook<void> {
  const _WidgetObserver();

  @override
  HookState<void, Hook<void>> createState() {
    return _WidgetObserverState();
  }
}

class _WidgetObserverState extends HookState<void, _WidgetObserver> with WidgetsBindingObserver {
  @override
  void build(BuildContext context) {}

  @override
  void initHook() {
    super.initHook();
    WidgetsBinding.instance.addObserver(this);
  }

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print("app state now is $state");
    super.didChangeAppLifecycleState(state);
  }
}

потом

      class Root extends HookWidget {

  @override
  Widget build(BuildContext context) {
    useWidgetLifecycleObserver(context);

Answer 4

Мне просто пришлось столкнуться с той же проблемой. И вот мое решение с использованием клиентских крючков

          import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

AppLifecycleState useAppLifecycleState() {
  return use(const _LifeCycleState());
}

class _LifeCycleState extends Hook<AppLifecycleState> {
  const _LifeCycleState();

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

class __LifeCycleState extends HookState<AppLifecycleState, _LifeCycleState>
    with WidgetsBindingObserver {
  AppLifecycleState _theState;

  @override
  void initHook() {
    super.initHook();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    setState(() {
      _theState = state;
    });
  }

  @override
  AppLifecycleState build(BuildContext context) {
    return _theState;
  }

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

А в HookWidget, который вы хотите получить доступ к состоянию жизненного цикла приложения, используйте useEffect:

      final appLifecycleState = useAppLifecycleState();

useEffect(() {
  print("current app state");
  print(appLifecycleState);
  if (appLifecycleState == AppLifecycleState.paused ||
      appLifecycleState == AppLifecycleState.inactive) {
    //...
  } else if (appLifecycleState == AppLifecycleState.resumed) {
    //...
  }
  return null;
}, [appLifecycleState]);