入门flutter，状态库到底用哪个！

入门flutter，状态库到底用哪个！

我之前没写过flutter，进了新公司要求使用flutter。由于对flutetr的生态不熟悉，常常感到疑惑，我到底该用哪个库。其中最有争议的就是状态库的选择，在查找了诸多资料和群里询问交流后，写下了这篇文章，对我所接触到的一些flutter库进行调研。

经过查找资料和群友交流推荐，我现在有两个备选方案，一个是provider，一个是getx，provider是官方推荐，但感觉不是很好用，getx网友褒贬不一，还说什么初学者用了getx就废了(笑哭)，让我不知该如何是好，令刚开始接触flutter的我甚为纠结，因为我都不熟悉，后来又了解到provider的作者还写了一个更好用的库riverpod，去了解了一下，然后现在选择就变成了getx or riverpod。

由于一时之间不能决定，于是我决定分开两个分支来写，一个使用riverpod + flutter_hooks，一个用getx。

使用riverpod + flutter_hooks

需要安装的依赖：flutter pub add hooks_riverpod flutter_hooks 这个写法使用的hook对于react和vue3开发者非常的友好，符合使用习惯，最重要的是很方便。

写法如下：

使用HookConsumerWidget，定义一个响应式更新到变量使用useState: final isButtonDisabled = useState<bool>(false);，这样就可以愉快的使用定义的变量了，页面会响应式更新的。

class EmailVerificationScreen extends HookConsumerWidget {
  final Map<String, dynamic>? arguments;

  const EmailVerificationScreen(this.arguments, {super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final formKey = useMemoized(() => GlobalKey<FormState>());
    final emailCodeController = useTextEditingController();

    final isButtonDisabled = useState<bool>(false);

    Future<void> nextStep(BuildContext context) async {
      try {
        SRouter(context).pushNamed("SetPassword", queryParameters: {
          "account": arguments?['account'],
        });
      } catch (e) {
        print(e);
      }
    }

    useEffect(() {
      listener() {
        isButtonDisabled.value = emailCodeController.text.length < 6;
      }

      emailCodeController.addListener(listener);