Warn users if no observables were found inside the builder function of Observer

[pavanpodila]

It's a good check to ensure no surprises. I just spent few mins to discover I had not marked the field as @observable. This check will ensure we get warned upfront.

[pavanpodila]

Fixed with #111

[Timbabs]

I get this message:
There are no observables detected in the builder function for Observer@18
How can I trace Observer@18?

[pavanpodila]

Can you share the build() method where the Observer is being used? Also are you running the build_runner ?

[Timbabs]

That's the problem. How do I know which of my observers is observer@18?

[pavanpodila]

I would start by giving names to few Observers that you think are the culprits. This would have to be done by trial and error for now 😢. You could give a name like so:

Observer(name: 'test', builder: (_) {});

If you see the message with that name, you know you got your culprit.

[Timbabs]

Ok thanks. I didn't know I could name my observers. That helped me in resolving the issue

[pavanpodila]

Ok thanks. I didn't know I could name my observers. That helped me in resolving the issue

Great to know that. Perhaps you can make a blog post or send me a note on how you solved it and I can add it to the Guides section on mobx.pub :-)

[Timbabs]

Great to know that. Perhaps you can make a blog post or send me a note on how you solved it and I can add it to the Guides section on mobx.pub :-)

Will do that

[stefensuhat]

Hi,

I'm experiencing same issue with this error "There are no observables detected in the builder function"

abstract class _AccountStore with Store {
  @observable
  bool loadingButtonStatus = false;


  @observable
  bool get loading => loadingButtonStatus;


  @action
  Future updateAccount(formData) async {
    loadingButtonStatus = true;

    Future.delayed(Duration(milliseconds: 2000)).then((future) {
      loadingButtonStatus = false;
    }).catchError((e) {
      loadingButtonStatus = false;
      print(e);
    });
  }
}

here is my widget

AccountStore store = AccountStore();

Observer(
  name: 'loading_button',
  builder: (_) => LoadingButton(
        loading: store.loading,
        text: Text('Save'),
        onPressed: () {
          store.updateAccount({});
        },
))

But everytime i run the code it always return me: There are no observables detected in the builder function

I've tried changed use store.loadingButtonStatus still the same.

any solution?

[Timbabs]

Few observations.

@observable
 bool get loading => loadingButtonStatus 

should not be an observable.

change it to this:

@computed
 bool get loading => loadingButtonStatus 

Having said that if you had used

store.loadingButtonStatus

Then it should have also worked. And loading becomes redundant. But if you must use loading , then set it to @computed, run

flutter packages pub run build_runner watch --delete-conflicting-outputs

And try again

[stefensuhat]

@Timbabs thanks a lot mate!.

the one thing that i forget is to run that build_runner. it still using the old function i created!

and of course that loading should be @computed. 💃

[yaymalaga]

@Timbabs Just out of curiosity, I would like to know which between the @computed or the @observable is recommended for a simple getter.

I mean, if I have a private observable variable like loading, is it better to just make it public and use the Observable widget, or let it remain public and use anyways the computed getter?

[Timbabs]

@yaymalaga
So if I get your question correctly, you're asking which of this?
1)

(in your store class)
@observable
bool loading

(in your widget class)
Observer(
  name: 'loading_button',
  builder: (_) => LoadingButton(
        loading: store.loading,
))

or
2)

(in your store class)
@observable
bool _loading

@computed
bool get loading => _loading

(in your widget class)
Observer(
  name: 'loading_button',
  builder: (_) => LoadingButton(
        loading: store.loading,
))

Both work fine. So it's your choice.

I will go for the later if concerned about class encapsulation.

[eltonomicon]

Class encapsulation is the motivation for #220. It feels awkward to have to do a private observable and a public computed for every property of a store you want to encapsulate. I'm not sure if that syntax is best but ideally the code generator could provide a better solution.

[edukmattos]

Hi !
Im getting this error message:

Reloaded application in 1.070ms.
Performing hot restart... 1.071ms
-- AppModule INITIALIZED
-- ClientModule INITIALIZED
No observables detected in the build method of UserName
package:flutter_web_mobile/app/modules/client/client_page.dart 169:1 build

File client_page_dart:
body: Form(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Observer(
name: 'UserName',
builder: (_) => TextField(
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Pick a username',
errorText: 'Erro'
),
),
),

[pavanpodila]

In your builder function, there is no observable that is being used. All appear to be plain strings.

Also when pasting code enclose them in triple backticks. It makes it easier for others to read your code.
```
your code
```