CODEWITHSUNDEEP
flutterriverpod
devberkay
devberkay

Reputation: 141

Flutter layouts the elements of the Row correctly but gives RangeError on console?

i have a widget which returns 2 possible layouts as you can see the numerations in the screenshot, i don't get any errors on the console for scenarios where it transforms from 1 -> 2, 1->1 , 2->2.

But, when it goes from 2->1 ,

i get couple of (RangeError (index): Invalid value: Not in inclusive range 0..x : y) errors. ( I only get this where AnswerBar goes from layout 2 to layout 1 )

It always works correctly and i never get any incorrect layout or a error indicating banner on the phone but it's annoying to get this error on the debug console.How can i solve this issue?

enter image description here

enter image description here

Upvotes: 0

Views: 213

Answers (2)

devberkay
devberkay

Reputation: 141

Solution is : using keys. ( I used for AnswerBar )

Simply , if you find yourself adding , removing or reordering collection of widgets of the same type that hold some state ( which is my case) , key is the solution.

I found the solution from these Flutter official resources :

video format : https://www.youtube.com/watch?v=kn0EOS-ZiIc

article format : https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

Upvotes: 0

Alex Hartford
Alex Hartford

Reputation: 5990

You're using a LayoutBuilder, which should be treated how you would a function handler for the purpose of reading a provider because it's using a different context than your parent component where you are reading the answerLengthProvider.

The fix is to use context.read within the LayoutBuilder instead of useProvider outside of it.

class AnswerBar extends HookWidget {
  const AnswerBar() : super();

  @override
  Widget build(BuildContext context) {
    print('AnswerBar built.');
    return LayoutBuilder(builder: (context, size) {
      final _answerLength = context.read(answerLengthProvider);
      ...
    }
  }
}

Upvotes: 1

Related Questions