Bloc: Problem with for loop inside the bloc

[ihsancemil]

I'm building a simple sorting visualizer app.

Bloc is not changing its state when hitting the yield portion.

  Stream<SortingAlgorithmState> _bubbleSort(List<double> list) async* {
    for (int i = 0; i < list.length-1; i++) {
      for (int j = 0; j < list.length-i-1; j++){
        if (list[j] > list[j+1]) {
          var temp = list[j];
          list[j] = list[j+1];
          list[j+1] = temp; 
          yield ListChangedState(list);
          await Future.delayed(Duration(milliseconds: 50));
        }
      }
    }
  }

You can find the all project at https://github.com/ihsancemil/sorting_visualizer

[tenhobi]

Try to make BlocDelegate which will print all the transitions (and post it here) to see what is the issue. https://felangel.github.io/bloc/#/coreconcepts?id=blocdelegate

[ihsancemil]

I will post the result when I have finished

[ihsancemil]

I/flutter (13682): ShuffleList
I/flutter (13682): Transition { currentState: ListChangedState, event: ShuffleList, nextState: ListChangedState }
I/ting_visualize(13682): ProcessProfilingInfo new_methods=401 is saved saved_to_disk=1 resolve_classes_delay=8000
I/flutter (13682): ShuffleList
I/flutter (13682): Transition { currentState: ListChangedState, event: ShuffleList, nextState: ListChangedState }
I/flutter (13682): BubbleSort

Before the I/flutter (13682): BubbleSort line everything work perfectly. But when I press the bubble sort event is triggered but any state change happened

[felangel]

Hi @ihsancemil 👋
Thanks for opening an issue!

Are you able to share a link to the repo? If not can you create a sample app which illustrates the problem so I can take a look?

Thanks!

[ihsancemil]

Sure @felangel , I have provided link in the question
https://github.com/ihsancemil/sorting_visualizer

[felangel]

Thanks! I’ll have a look later today 👍

[felangel]

@ihsancemil I took a look and I believe the problem is you're mutating state within the bloc instead of creating a copy of the state.

  Stream<SortingAlgorithmState> _bubbleSort(List<double> list) async* {
    for (int i = 0; i < list.length-1; i++) {
      for (int j = 0; j < list.length-i-1; j++){
        if (list[j] > list[j+1]) {
          var temp = list[j];
          list[j] = list[j+1];
          list[j+1] = temp; 
          yield ListChangedState(list);
          await Future.delayed(Duration(milliseconds: 50));
        }
      }
    }
  }

Rather than mutating the list and yielding the mutated list you should make a copy of the list like:

   else if (event is MergeSort) {
      final list = List.from(event.list);
      yield* _mergeSort(list, 0, list.length);
    }

Hope that helps 👍

[ihsancemil]

@felangel I updated my repository. Copying the list solve the bubble sort part. However if I press the merge sort button it still crashes.

I/flutter (15884): MergeSort
I/flutter (15884): Transition { currentState: ListChangedState, event: MergeSort, nextState: ListChangedState }
I/flutter (15884): Transition { currentState: ListChangedState, event: MergeSort, nextState: ListChangedState }
Application finished.
Exited (sigterm)

On the screen I can see that list is updated one time. I debug the program, however I did not understand the problem. It hits 2 time to the yield part than it finishes the sorting end blocking ui till it crashes.

[ihsancemil]

@felangel I still cannot solve the problem. Should I assume that bloc should not used with recursive streams methods? Or is it possible to overcome my problem?

[felangel]

@ihsancemil I believe you have bugs in your mergeSort implementation. When I run it I get a RangeError

RangeError (RangeError (index): Invalid value: Not in range 0..9, inclusive: 10)

on line 50:

if (leftIndex == midIndex || cloneList[rightIndex] > cloneList[leftIndex]){...}

cloneList[rightIndex] throws an exception because rightIndex = 10 and cloneList.length = 10.

I don't think this issue is bloc specific.