I am building a quiz app using Dart flutter in that some questions will get displayed and users have to click on true or false buttons depending upon question is right or wrong. To tell users that they are right or wrong icon (✓ or ✘) will get displayed in bottom row every time they choose answer by clicking on either of the button. But in flutter if row gets completely filled i got error value: Not in inclusive range. So i want that icon should automatically go to next row.

Heres the short code which i tried:

List scorekeeper = [];

void score(bool userpickedanswer) {

setState((){
if (userpickedanswer == correctanswer) {
  scorekeeper.add(Icon(Icons.check, color: Colors.green,));
}
else {
  scorekeeper.add(Icon(Icons.close, color: Colors.red,));
}

}

Row { childeren : scorekeeper

CodePudding user response：

You can use a wrap instead of a row. It prevents overflow by displaying the items depending on the available space: https://api.flutter.dev/flutter/widgets/Wrap-class.html

CodePudding user response：

You can use the Wrap widget instead of the Row widget and when the line of icon fills to the end the Wrap widget makes another line automatically

Use the code like this:

Wrap(
    children: scorekeeper,
),