title: How to update a list in Flutter with Bloc/Cubit?
body: <p>my UI consists of a table of objects <strong>Apples</strong>.<br>
  Every cell in the table:</p>
  <ul>
  <li>has an <strong>ADD</strong> button, if the apple is NOT present for that cell</li>
  <li>it shows the apple and has a <strong>DELETE</strong> button, if the apple is present</li>
  </ul>
  <p>The main page of my application is calling the following widget to <strong>LOAD the LIST</strong> of apples from an <strong>API</strong>. And also the <strong>ADD</strong> and <strong>DELETE</strong> functions communicate with the same <strong>API</strong> for adding and deleting the apple.</p>
  <pre><code>class ApplesLoader extends StatefulWidget {
    @override
    _ApplesLoaderState createState() =&gt; _ApplesLoaderState();
  }
  
  class _ApplesLoaderState extends State&lt;ApplesLoader&gt; {
    @override
    void initState() {
      super.initState();
      BlocProvider.of&lt;ApplesCubit&gt;(context).getAll();
    }
  
    @override
    Widget build(BuildContext context) {
      return BlocConsumer&lt;ApplesCubit, ApplesState&gt;(
        listener: ...,
        builder: (ctx, state) {
          if (!(state is ApplesLoaded)) {
            return circularProgressIndicator;
          }
          return ApplesViewer(state.Apples);
        },
      );
    }
  }
  </code></pre>
  <p>So after that ApplesViewerhas the list of apples and can correctly display the grid.</p>
  <p>But now I have two problems:</p>
  <ol>
  <li><p>When I press the ADD button or the DELETE button, all the application is rebuilt, while I could actually just re-paint the cell. But I don't know how to avoid this, because I also need to communicate to the application that the list of apples is actually changed. I don't want to rebuild the entire UI because it seems inefficient since what is actually changing on my page is only the selected cell.</p>
  </li>
  <li><p>When I press the ADD button or the DELETE button, I would like to show a circular progress indicator that replaces the button (while waiting for the API to actually creating/deleting the apple). But when the list changes, all the application is rebuilt instead. So, I am not sure how to achieve this desired behavior.</p>
  </li>
  </ol>
  <p><strong>Could you help me in solving those two issues?<br>
  Or advise me for a change of infrastructure in case I am making some mistake in dealing with this?</strong></p>
  <p>If needed, this is the code for <strong>ApplesCubit</strong></p>
  <pre><code>class ApplesCubit extends Cubit&lt;ApplesState&gt; {
    final ApplesRepository _repository;
  
    ApplesCubit(this._repository) : super(ApplesLoading());
  
    Future&lt;void&gt; getAll() async {
      try {
        final apples = await _repository.getAll();
        emit(ApplesLoaded(List&lt;Apple&gt;.from(apples)));
      } on DataError catch (e) {
        emit(ApplesError(e));
      }
    }
  
    Future&lt;void&gt; create(List&lt;Apple&gt; apples, Apple appleToAdd) async {
      try {
        final newApple = await _repository.create(appleToAdd);
        final updatedApples = List&lt;Apple&gt;.from(apples)..add(newApple);
        emit(ApplesLoaded(updatedApples));
      } on DataError catch (e) {
        emit(ApplesError(e));
      }
    }
  
    Future&lt;void&gt; delete(List&lt;Apple&gt; Appless, Apple appleToDelete) async {
      try {
        await _repository.deleteApples(appleToDelete);
        final updatedApples = List&lt;Apple&gt;.from(Appless)..remove(appleToDelete);
        emit(ApplesLoaded(updatedApples));
      } on DataError catch (e) {
        emit(ApplesError(e));
      }
    }
  }
  </code></pre>