Improve docs for Flutter Devs coming from Stateful workflow

[esDotDev]

trafficstars

The current example shows the creation of a AnimController, but doesn't show you how to use it. Assuming you want to actually start it, you need some sort of init() hook. This is initially where I got stuck when first coming into Hooks, and I think the docs could do a better job here.

First, I think it would be extremely beneficial to just have a code snippet like this near the top of the docs:

In order to init and dispose with Hooks, you can call useEffect, and pass it an empty set of dependencies []:

Widget build(){
   useEffect(
      (){
          // Do init stuff
         return (){  //Do dispose stuff };
      }, [ ] ) // pass an empty list of deps so this only fires once
   );
}

This would have cleared up so much for me as someone who had zero prior knowledge with hooks (and did not want to dive into extensive react docs).

Additionally, changing the initial AnimController example to call controller.forward() would make it a much more practical example and answer the immediate question every Flutter dev would have when reading that example, which is "so, where & how do I start it?"

[venkatd]

Not sure if this will help with the docs, but I had to create an expandable/collapsible widget using flutter_hooks and animation controller.

import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

// adapted from https://stackoverflow.com/a/54173729/67655

class ExpandableSection extends HookWidget {
  const ExpandableSection({
    Key key,
    this.expanded = false,
    this.child,
    this.animationDuration = const Duration(milliseconds: 500),
    this.animationCurve = Curves.fastOutSlowIn,
  })  : assert(expanded != null),
        assert(child != null),
        assert(animationDuration != null),
        assert(animationCurve != null),
        super(key: key);

  final bool expanded;
  final Widget child;

  final Duration animationDuration;
  final Curve animationCurve;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(
      duration: animationDuration,
      initialValue: expanded ? 1.0 : 0.0,
    );

    useEffect(() {
      if (expanded && controller.value < 1.0) {
        controller.forward();
      } else if (!expanded && controller.value > 0.0) {
        controller.reverse();
      }
      return null;
    });

    return SizeTransition(
      axisAlignment: 1.0,
      sizeFactor: CurvedAnimation(
        parent: controller,
        curve: animationCurve,
      ),
      child: child,
    );
  }
}

Hopefully that helps with documentation