flutterriverpodflutter-hooks

Is there a use for hooks_riverpod

I'm kinda confused as to what exactly the aim is with hooks_riverpod, I've used flutter_riverpod, and I've used flutter_hooks, but what is hooks_riverpod, on the pub.dev main page for hooks_riverpod, it's documentation is just flutter_riverpod documentation, there's not a single mention of hooks, and it's basically the same syntaxes and functionality?, I'm super confused, is this a troll package?, when I import hooks_riverpod into my project and remove flutter_riverpod, there are no errors, it just works with my former flutter_riverpod code. How and what is hooks riverpod and where is the documentation, how does it do anything different than flutter_riverpod since flutter riverpod basically even has full hook capabilities with extra features, what's the point of this combination and where is the evidence of the hooks added to the flutter_riverpod

Solution

  • The flutter_hooks package allows you to use hooks like: useEffect, useState, useAnimation, useTextEditingController and others. The full list is presented here Existing hooks.

    As an example, we could use hooks to manually implement a fade-in animation, where a widget starts invisible and slowly appears.

    If we were to use StatefulWidget, the code would look like this:

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

  final Widget child;

  @override
  State<FadeIn> createState() => _FadeInState();
}

class _FadeInState extends State<FadeIn> with SingleTickerProviderStateMixin {
  late final AnimationController animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 2),
  );

  @override
  void initState() {
    super.initState();
    animationController.forward();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (context, child) {
        return Opacity(
          opacity: animationController.value,
          child: widget.child,
        );
      },
    );
  }
}

    Using hooks, the equivalent would be:

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

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final animationController = useAnimationController(
      duration: const Duration(seconds: 2),
    );

    useEffect(() {
      return null;
    }, const []);

    useAnimation(animationController);

    return Opacity(
      opacity: animationController.value,
      child: child,
    );
  }
}

    Note that we use the HookWidget class, which allows you to use hooks inside the build method. But at the same time, we do not have WidgetRef ref as an argument to the build method.

    And it is the package hooks_riverpod that gives us the widget HookConsumerWidget that allows us to use hooks in the build method, and also has WidgetRef ref as an argument

    class HomeView extends HookConsumerWidget {
  const HomeView({Key? key}): super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // HookConsumerWidget allows using hooks inside the build method
    final state = useState(0);

    // We can also use the ref parameter to listen to providers.
    final counter = ref.watch(counterProvider);
    return Text('$counter');
  }
}

    You can read more about it here