I want to make my Icons Automatically go to next Row in flutter if previous row gets completrly filled with icons

user_18667278 0
Viewed 28

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

flutter
2 Answers

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,
),
user_192624920
user_112449910
Related