flutter_hooks 0.0.0+2 flutter_hooks: ^0.0.0+2 copied to clipboard
A flutter implementation of React hooks. It adds a new kind of widget with enhanced code reuse.
Flutter Hooks #
A flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
What are hooks? #
Hooks are a new kind of object that manages a Widget
life-cycles. They exists for one reason: increase the code sharing between widgets and as a complete replacement for StatefulWidget
.
The StatefulWidget issue #
StatefulWidget
suffer from a big problem: it is very difficult reuse the logic of say initState
or dispose
. An obvious example is AnimationController
:
class Example extends StatefulWidget {
@override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Container();
}
}
All widgets that desired to use an AnimationController
will have to copy-paste the initState
/dispose
, which is of course undesired.
Dart mixins can partially solve this issue, but they are the source of another problem: type conflicts. If two mixins defines the same variable, the behavior may vary from a compilation fail to a totally unexpected behavior.
The Hook solution #
Hooks are designed so that we can reuse the initState
/dispose
logic shown before between widgets. But without the potential issues of a mixin.
Hooks are independents and can be reused as many times as desired.
This means that with hooks, the equivalent of the previous code is:
class Example extends HookWidget {
@override
Widget build(HookContext context) {
final controller = context.useAnimationController(
duration: const Duration(seconds: 1),
);
return Container();
}
}