title: Color containers in array flutter
body: <p>Question updated apr 10:</p>
  
  <p>Hi!
  I'm still stuck and can't get this to work :(</p>
  
  <p>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.</p>
  
  <p>I could really use some further help here.</p>
  
  <p>Below I have made the code as simple as I can with different colors just to show the different items in the list.</p>
  
  <p>Right now it works fine with the first question, but then it kind of stops.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; 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() =&gt; _FirstScreenState();
  }
  
  class _FirstScreenState extends State&lt;FirstScreen&gt; {
    int sum = 5;
    String userAnswer;
    String correction = "";
  
    List&lt;Color&gt; 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: &lt;Widget&gt;[
                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: &lt;Widget&gt;[
                    buildContainer(context, 0),
                    buildContainer(context, 1),
                    buildContainer(context, 2)
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>