Color containers in array flutter - list

Question

Question updated apr 10:
Hi!
I'm still stuck and can't get this to work :(
I'm trying to make an app where the user will answer a total of 3 questions before he's navigated to a result-screen.
To show the progress of the questions there will be 3 colored containers in a row. The row will initally be for example blue but when the user answers correct - the container for that question will turn green, and if answer is incorrect the container will turn red.
I could really use some further help here.
Below I have made the code as simple as I can with different colors just to show the different items in the list.
Right now it works fine with the first question, but then it kind of stops.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'listing 4',
theme: ThemeData(primarySwatch: Colors.blue),
home: FirstScreen(),
);
}
}
class FirstScreen extends StatefulWidget {
#override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
int sum = 5;
String userAnswer;
String correction = "";
List<Color> colors = [Colors.blue, Colors.amber, Colors.pink];
submitPressed(int index) {
if (userAnswer == sum.toString()) {
setState(() {
correction = sum.toString();
colors[index] = Colors.green;
});
} else {
colors[index] = Colors.red;
}
}
Widget myListBuilder() {
return ListView.builder(
itemCount: 3,
itemBuilder: buildContainer,
);
}
Widget buildContainer(BuildContext context, int index) {
return Container(
child: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
height: 20.0,
width: 15.0,
decoration: BoxDecoration(
color: colors[index], //this is the important line
borderRadius: BorderRadius.all(Radius.circular(8.0))),
),
));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Listing 4'),
),
body: Container(
child: Center(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text('Correct answer is 5',
style: TextStyle(fontSize: 20.0)),
),
Container(
width: 50.0,
child: TextField(
textAlign: TextAlign.center,
autofocus: true,
keyboardType: TextInputType.number,
onChanged: (val) {
userAnswer = val;
},
),
),
RaisedButton(
child: Text('Submit'),
onPressed: () {
submitPressed(0);
},
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildContainer(context, 0),
buildContainer(context, 1),
buildContainer(context, 2)
],
),
],
),
),
),
);
}
}

Answer 1

Ok, I'm going to assume a few things within this answer, so change them as necessary. The colours you are going to use are Colors.blue for the default color, Colors.green for correct, and Colors.red for incorrect.
You would first initialise a List of colors, all of which will be blue as that is the default color:
List<Color> colors = [Colors.blue, Colors.blue, Colors.blue ..... Colors.blue]
//You will write Colors.blue ten times as there are 10 boxes.
I'm going to assume that you use a ListView.builder here, as you haven't specified it in your code example. You would build your ListView as such:
//Place this within your widget tree
ListView.builder(
itemBuilder: buildContainer,
itemCount: 10,
);
You will then need to modify your buildContainer method as the itemBuilder parameter requires a method to take context and index and output a widget, therefore:
Widget buildContainer(BuildContext context, int index) {
return Container(
child: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
height: 20.0,
width: 15.0,
decoration: BoxDecoration(
color: colors[index], //this is the important line
borderRadius: BorderRadius.all(Radius.circular(8.0))
),
),
)
);
}
This will then create 10 boxes that each have gotten their colour from their position within the list of colors created earlier. Now you just have to change the color when they are finished. Using your code example:
if (userAnswer == widget.sum.toString()) {
setState(() {
correction = widget.sum.toString();
//Here we will instead set the specific color in the array
colors[index] = Colors.green;
});
} else {
correction = widget.sum.toString();
colors[index] = Colors.red;
}
The only thing you need to do is make sure the function when you click next takes a variable which is the index of the questions, i.e. the question number you are on.