CODEWITHSUNDEEP
flutterdartmobx
pavlos
pavlos

Reputation: 567

Flutter mobx no observable detected

I have a MobX store which has an observable string

@observable
String searchText = '';

@action
Future<List<Contact>> fetchContacts(int offset, String searchText) async {
if (offset == 0) {
  _page = 1;
}
final response = await _contactsRepository.getAll(_page,'',{'name': searchText});
print('offset $offset');
_page++;
print('response data ${response.data}');
return response.data.isEmpty ? [] : response.data;

}

In my view i am doing creating a paginated view wrapped inside of an Observer and i am using the observable string i created in the store.

SafeArea(
    child: Observer(
      builder: (_) {
        print('REBUIKD');
        return PaginationView<Contact>(
          separator: Divider(color: Colors.grey),
          paginationViewType: PaginationViewType.listView,
          pageFetch: (int offset) => _contactsStore.fetchContacts(
              offset, _contactsStore.searchText),
          itemBuilder: (context, Contact contact, int index) {
            return GestureDetector(
                onTap: () => Navigator.of(context)
                    .push(MaterialPageRoute(builder: (_) {})),
                child: ContactListItem(
                  contact: contact,
                ));
          },
          onError: (dynamic error) => Center(
            child: Text('Some error occured'),
          ),
          onEmpty: Center(
            child: Text('Sorry! This is empty'),
          ),
          bottomLoader: Center(
            // optional
            child: CircularProgressIndicator(),
          ),
          initialLoader: Center(
            // optional
            child: CircularProgressIndicator(),
          ),
        );
      },
    ),
  ),

The issue is that i get the a No observables detected in the build method of Observer error

The observable i want to observe to rebuild is searchText

I cannot understand why mobX does not detect that i am actually using the observable inside the builder

Upvotes: 0

Views: 2423

Answers (1)

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277037

Instead of wrapping a Listview.builder in an Observer, you should put the Observer inside itemBuilder:

ListView.builder(
  itemBuilder: (context, index) {
    return Observer(...);
  }
)

And if you need to specify an itemCount or anything similar, you will need two of them:

Observer(
  builder: (context) {
    return ListView.builder(
      itemCount: someStore.list.length,
      itemBuilder: (context, index) {
        return Text(someStore.list[index].name);
      },
    );
  },
)

Upvotes: 1

Related Questions