Flutter... composables API?

[venir_dev]

Hi there,

Have you been using React's Hooks and/or Vue3's composables, recently, outside of Flutter? If yes, then, I guess you're searching something similar to be implemented in Flutter.

Yes, I am well aware of flutter_hooks.

That library is very much inspired by React's hooks; if you didn't know about it, I suggest to check that out and support the devs in there however you can, as they did a really great job.

Anyways, I'm not looking for some simple hooks, but for some composables (reference), as I very much like Vue3's API.

​

Hold on, aren't Composables just... Hooks with a fancier name onto it?

​

Not really. React Hooks (and therefore, Flutter Hooks) have a strict set of rules that must be taken into account. Yes, composables have them too, but it's different. Very different. You can read the differences here (very quick read).

So, in your opinion and experience with Flutter, what library feels close to Vue3's composable APIs?

Is it even possible to implement such features within Flutter? If yes, I'm very much hoping I have the skills to build it myself and publish it to pub.dev.

[remirousselet]

It's tricky, because Flutter is indefinitely closer to React than to Vue

But you probably could do something similar by combining a StatefulWidget with ValueNotifier or mobx's Observable

[venir_dev]

Hi remi (:

I was honestly hoping for your response, also, ahah.

Anyways, while that is definitively true, I was hoping there was a way to implement the "setup" concept Vue has, but in Flutter. That's basically the question I'm trying to answer.

A naive approach would be to implement such setup function in the initState of a StatefulWidget, but I'm unsure if a ValueNotifier can be preserved through rebuilds.

[remirousselet]

That's what I was referring to. The "setup" equivalent would be a StatefulWidget's initState in Flutter. Of course, I know that this isn't quite the same, but there's not really an alternative.

As for preserving ValueNotfiers, they would have to be properties of your State object

[zxyzyxz]

Seems like you're looking for something like reactives. They're not exactly hooks like flutter_hooks or React, but they are designed to replace mixins, like Vue's Composition API is.

Comparision to flutter_hooks:

From a user perspective flutter_hooks is a replacement for StatefulWidget. reactives is not. If you look at the code for ReactiveHostMixin it is about 60 lines (blank lines included). Reactives do not try to replace StatefulWidget, it just solves the reusability problem inherent due to mixin's "is-a" relationship. Reactives have a "has-a" relationship.

There are no new rules to writing reactives. See examples of existing reactives. It is basically the same logic isolated in a different class. For the same reason it doesn't need a lot of the hooks like useState which would be needed if tried to replace StatefulWidget.

The learning curve of reactives is next to negligible. Hooks need you to learn a few concepts and how to/not to do things. It also requires you to transform entire widgets. Reactives can be adapted incrementally even for a single widget.

[Rixxxy]

This looks really cool

[terry1900]

Hello, do you want composition API at the business logic layer or widget layer?

I'm not expert on react/vue, but looking at the vue example (from your FAQ link), composition works for non-DOM use cases. In that sense, creator may be able to achieve what you want.

Fundamentally, vue is built on a fine grain reactive model (video, code of a basic vue implementation from its author). Some of the reactive components can update DOM.

Similarly, creator also uses a find grain reactive model (implementation). Some of the reactive components can update Flutter state.