Применяем 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   } }

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

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

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

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

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 заинтересовала вас так же, как и меня.