Create ListView with infinite scrolling by provider: setState() or markNeedsBuild() called during build

Question

I am trying to create ListView where items are built while the screen is being scrolled. I am trying to add content by using provider.

I get an error "setState() or markNeedsBuild() called during build" when calling notifyListener() inside itemBuilder.

I know the reason is because notifyListener() is called during ListView is built.

My questions are:

is there a workaround to call notifyListener() after or before build?
if this is not even an appropriate approach, what is the best approach to add content to ListView for infinite scrolling by using Provider?

This is not a duplicate of this post because his ListView widget doesn't have to be built over and over again as scroll happens.

my_app.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:provider/provider.dart';
import 'suggestions.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => Suggestions(),
        ),
      ],
      child: MaterialApp(
        title: 'Welcome to Flutter',
        theme: ThemeData(
          primaryColor: Colors.white,
        ),
        home: RandomWords(),
      ),
    );
  }
}

class RandomWords extends StatelessWidget {
  final _biggerFont = TextStyle(fontSize: 18.0);

  void _addSuggestions(BuildContext context) {
    Provider.of<Suggestions>(context, listen: false).addSuggestions();
  }

  @override
  Widget build(BuildContext context) {
    var suggestions = Provider.of<Suggestions>(context).getSuggestions;
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
        actions: [
          IconButton(icon: Icon(Icons.list), onPressed: () {}),
        ],
      ),
      body: _buildSuggestions(suggestions),
    );
  }

  Widget _buildSuggestions(suggestions) {
    return ListView.builder(
        padding: EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) {
          if (i.isOdd) {
            return Divider(); /*2*/
          }

          final index = i ~/ 2; /*3*/
          if (index >= suggestions.length) {
            _addSuggestions(context);
          }
          return _buildRow(suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        Icons.favorite_border,
        color: null,
      ),
    );
  }
}

suggestions.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

class Suggestions extends ChangeNotifier {
  var _suggestions = <WordPair>[];

  get getSuggestions {
    return _suggestions;
  }

  void addSuggestions() {
    _suggestions.addAll(generateWordPairs().take(10));
    notifyListeners();
  }
}

Does this answer your question? [setState() or markNeedsBuild called during build](https://stackoverflow.com/questions/47592301/setstate-or-markneedsbuild-called-during-build) — ajay, Mar 13 '21 at 11:52
I have the exact same problem: I'm trying to adapt the official [Flutter tutorial](https://docs.flutter.dev/get-started/codelab) to use providers. I assume anyone who tries this will run into this same issue, and it's very confusing as a new Flutter user. — ntc2, Feb 17 '22 at 11:53

score 1 · Accepted Answer · answered Mar 17 '21 at 03:22

1

Remove notifyListeners() from addSuggestions();

It is because ListView is being built every time scroll happens. You do not need to use notifyListeners to rebuild the widget inside a widget that rebuilds by itself.

answered Mar 17 '21 at 03:22

Kouta Nakano

595
3
15

But how to solve this general problem: "what is the best approach to add content to `ListView` for infinite scrolling by using `Provider`"? I.e. suppose that the data used to build the `ListView` comes from a `Provider` that is `watch`ed by other parts of the app, so that not calling `notifyListeners` is not an option? – ntc2 Feb 17 '22 at 12:22

Create ListView with infinite scrolling by provider: setState() or markNeedsBuild() called during build

1 Answers1