Применяем Hooks из React во Flutter

Недавно я наткнулся на имплементацию хуков для Flutter, о которой и хочу рассказать.

Зачем использовать хуки во Flutter?

Причины те же, по которой люди используют их в React, а именно:

• Удобство

• Отсутствие бойлерплейта

• Простота для тривиальных случаев

В частности, неприятный момент со Statefull виджетами – большое количество бойлерплейта с initState и dispose. Авторы реализации описывают проблему таким кодом:

class Example extends StatefulWidget {
  final Duration duration;

  const Example({Key key, required this.duration})
      : super(key: key);

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

class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
  AnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
  }

  @override
  void didUpdateWidget(Example oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration) {
      _controller!.duration = widget.duration;
    }
  }

  @override
  void dispose() {
    _controller!.dispose();
    super.dispose();
  }

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

Думаю, взглянув на код, вы поняли ту боль, которую испытывали и его авторы.

Не желая мириться с болью, они вспомнили, что есть такая приятная вещь как хуки, и то как ими удобно пользоваться.

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

class Example extends HookWidget {
  const Example({Key key, required this.duration})
      : super(key: key);

  final Duration duration;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: duration);
    return Container();
  }
}

Небольшой технический ликбез

Хуки прекрасны, но есть требование - нельзя использовать условия при использовании хуков (см. пример).

@override
Widget build(BuildContext context) {
  if (isCondition) {
    final val = useHook();
    /// ... some code
  } else {
   	final val2 = useHook2();
    /// ... some code
  }
}

Если же вас интересует, то как хуки работают и почему это не магия, то авторы рекомендуют прочитать о внутреннем устройстве хуков тут ^[1].

Если вкратце, то важен порядок вызова хуков. Внутри каждого виджета есть счетчик, используя хук, счетчик инкрементируется, и за счет этого получается различать где какой хук (собственно, из-за этого и появилось ограничение на if`ы).

Как использовать?

Для начала необходимо добавить в ваш flutter проект библиотеку flutter_hooks ^[2].

flutter pub add flutter_hooks

Теперь рассмотрим более подробно, какие возможности предоставляет эта библиотека.

Допустим, у нас есть стартовое приложение, которое генерит Flutter. Тут классический счетчик нажатий на кнопку.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Теперь перепишем его на хуки. Для этого будем использовать useState и useCallback.

• useState - создает стейт и возвращает ValueNotifier<T>.

  Всякий раз, когда значение ValueNotifier обновляется, то обновляется и виджет ( ValueListenableBuilder использовать не обязательно). При первом вызове требуется указать начальное значение, потом оно игнорируется.

• useCallback - кэширование функции на основе списка ключей.

  Удобная обертка useMemoized для callback`ов

• useMemoized - кэширование значения на основе списка ключей.

class MyHomePage extends HookWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    final increment = useCallback(() => counter.value++, [counter]);
    // or useMemoized(() => () => counter.value++, [counter]);
    
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Окей, давайте что-нибудь поинтереснее.

Допустим мы хотим использовать Stream. Для этого есть хук useStream. Для начала напишем простой Stream с цветами.

Stream<Color> colorsStream() async* {
  final myColors = [
    Colors.blue,
    Colors.red,
    Colors.yellow,
    Colors.grey,
    Colors.green,
  ];
  while (true) {
    for (final color in myColors) {
      await Future.delayed(const Duration(milliseconds: 1000));
      yield color;
    }
  }
}

Stream есть, давайте использовать.

class MyHomePage extends HookWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final stream = useMemoized(() => colorsStream());
    final color = useStream(stream, initialData: Colors.white);

    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          height: 300,
          width: 300,
          duration: const Duration(milliseconds: 500),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: color.data,
          ),
        ),
      ),
    );
  }
}

При использовании useStream вызов build будет происходить на каждое новые событие, так что учитывайте, когда будете создавать Stream в методе build.

На этом функционал библиотеки не оканчивается, она предоставляет большое количество методов:

Итог

На этом - все, спасибо за уделенное время, надеюсь, идея использовать хуки во Flutter заинтересовала вас так же, как и меня.