Provider: setState() or markNeedsBuild() called during build

Question

I'm using Hive to store the whole list of Card items, related to an Extension. In the screen of the selected extension, I am displaying the Cards of this extension, with bunch of filters/sorting.

To do that, I use ValueListenableBuilder to get the current extension and their cards.

And when I filter/sort this list, I want to store them into my Provider class, because I would to reuse this list into another screen.

But we I do context.read<ShowingCardsProvider>().setAll(sortedList), I got this error:

setState() or markNeedsBuild() called during build.

I don't listen ShowingCardsProvider anywhere for now.

Can you explain to me what's wrong here?

Thank you!

main.dart

  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider.value(value: AuthProvider()),
      ChangeNotifierProvider.value(value: UserProvider()),
      ChangeNotifierProvider.value(value: ShowingCardsProvider()),
    ],
    child: MyApp(),
  ));

showing_cards_provider.dart

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:pokecollect/card/models/card.dart';

class CardsProvider extends ChangeNotifier {
  final List<CardModel> _items = [];

  UnmodifiableListView<CardModel> get items => UnmodifiableListView(_items);

  void setAll(List<CardModel>? items) {
    _items.clear();
    if (items != null || items!.isNotEmpty) {
      _items.addAll(items);
    }
    notifyListeners();
  }

  void addAll(List<CardModel> items) {
    _items.addAll(items);
    notifyListeners();
  }

  void removeAll() {
    _items.clear();
    notifyListeners();
  }
}

extension_page.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: SafeArea(
        child: LayoutBuilder(builder: (context, constraints) {
          return CustomScrollView(
            slivers: [
              SliverAppBar(
                ...
              ),
              ...
              SliverPadding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                sliver: ValueListenableBuilder(
                  valueListenable: ExtensionBox.box.listenable(keys: [_extensionUuid]),
                  builder: (ctx, Box<Extension> box, child) {
                    List<CardModel>? cardsList = box
                        .get(_uuid)!
                        .cards
                        ?.where((card) => _isCardPassFilters(card))
                        .cast<CardModel>()
                        .toList();

                    var sortedList = _simpleSortCards(cardsList);

                    context.read<ShowingCardsProvider>().setAll(sortedList);

                    return _buildCardListGrid(sortedList);
                  },
                ),
              ),
            ]
          );
        }),
      ),
    );
  }

score 0 · Answer 1 · answered May 21 '21 at 12:24

This is indeed because I'm using ValueListenableBuilder and, while the Widget is building, notifyListeners is called (into my provider).

My hotfix is to do this:

return Future.delayed(
  Duration(milliseconds: 1),
  () => context.read<ShowingCardsProvider>().setAll(list),
);

Not very beautiful, but it works

If you have a more elegant way, fell free to comment it!

Provider: setState() or markNeedsBuild() called during build

1 Answers1