frhooks 1.5.2

Flutter Android iOS web

Use react hooks in flutter!

Frhooks #

Build Status

use react like hooks in flutter.

Motivation #

Have the same thinking of the flutter_hooks motivation. React hooks is more brief to manage local state, and StatefulWidget are verbose. This library brings hooks to flutter. If your are React person, you will like it.

Usage #

useContext #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    BuildContext context = useContext() 
    return Container()
  }
}

useState #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    StateContainer result = useState(0)
    // result.state
    // result.setState
    return Container()
  }
}

useEffect #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    useEffect(() {
      // do effect here.
      return () {
        // remove effect here
      }
    })
    return Container()
  }
}

useCallback #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    var callback = useCallback(() {
      return 1
    }, [])
    // result == 1
    var result = callback()
    return Container()
  }
}

useMemo #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    var c = useMemo(() => computeExpensiveValue(a, b), [a, b]);
    return Container()
  }
}

useRef #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    final ref = useRef();
    // free to set and read ref.current
    return Container()
  }
}

useAnimationController #

class MyWidget extends HookWidget {
  Widget build(BuildContext context) {
    final controller = useAnimationController();
    // controller.forward()
    return Container()
  }
}

Mixins #

Frhooks aims to replace State completely, also include mixins.

HookAutomaticKeepAliveClientMixin #

Hook version of AutomaticKeepAliveClientMixin.

class MyWidget extends HookWidget with HookAutomaticKeepAliveClientMixin {
  get wantKeepAlive => true;

  Widget build(BuildContext context) {
    super.build(context);
    return Container();
  }
}