Flutter Hooks by Example

Flutter Hooks is a relatively new Flutter package that gives us the ability to use stateful logic in our Stateless Widgets using Hooks. It offers features like useState, useEffect, useStream, useValueListenable, and more, which help us to organize and simplify the logic and state in our Flutter applications.

Why Use Flutter Hooks?

Sometimes, we need to add a little bit of stateful logic to our Stateless Widgets, but we do not want to convert them into Stateful Widgets. At the same time, we also do not want to clutter our app with too many BloC classes. This is where Flutter Hooks come in handy. By using Hooks, we can manage and access stateful logic in a much simpler way than using BloC.

How to Use Flutter Hooks?

To use Flutter Hooks, we first need to import it into our Dart file by adding the following line to our pubspec.yaml file: ```yaml dependencies: flutter_hooks: ^0.18.0} We can then use the Hooks in our Flutter app like this:

import 'package:flutter_hooks/flutter_hooks.dart';

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      body: Center(
        child: Text('Count: ${counter.value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        child: Icon(Icons.add),
      ),
    );
  }
}

In the code above, we are using the `useState` Hook to manage the state of our counter variable. The `useState` Hook takes a default value and returns a stateful value and a setter function. Therefore, when we call `counter.value++`, we are updating the state of our counter variable.

More Examples of Flutter Hooks

import 'package:flutter_hooks/flutter_hooks.dart';

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    useEffect(() {
      print('Counter is now: ${counter.value}');
    }, [counter.value]);

    return Scaffold(
      body: Center(
        child: Text('Count: ${counter.value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.value++,
        child: Icon(Icons.add),
      ),
    );
  }
}

In the code above, we are using the `useEffect` Hook to print the value of our counter variable whenever it changes. The `useEffect` Hook takes a function and a list of dependencies. Whenever any of the dependencies change, the function is called. Therefore, in this case, we are only printing the value of our counter variable when it changes.

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:rxdart/rxdart.dart';

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final countStream = useStream(
      // Emit an event every second
      Rx.timer(0, Duration(seconds: 1)),
      // Use `scan` to accumulate the count over time
      initialData: 0,
      transformer: (stream) => stream.scan((acc, val, i) => acc + 1),
    );

    return Scaffold(
      body: Center(
        child: Text('Count: $countStream'),
      ),
    );
  }
}

In the code above, we are using the `useStream` Hook to manage a stream of counter values. The `useStream` Hook takes an initial stream, an initial value, and a stream transformer. In this case, we are using the `scan` function to accumulate the count over time. As a result, we get a stream of counter values that we can use to display the count in our widget.

Summary

Flutter Hooks is a useful Flutter package that allows us to use stateful logic in our Stateless Widgets using Hooks. With its various Hooks like useState, useEffect, useStream, useValueListenable, and more, we can simplify the logic and state in our Flutter applications. It is simple to use and offers a wide range of possibilities for managing stateful logic in our Flutter apps.