title: i want to make change my container color when i pressed the container
body: <p>**
  i am making the quiz app. consider each questions have four options(each option is a container in code). what i want is when i select the wrong option it need to show to selection container as red and also the correct answer as green. and when i press the right option it need to show selected container as green.</p>
  <p>here is my container code</p>
  <p>**</p>
  <pre><code>
  SizedBox(height: 20),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(bottom: 10),
                padding: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25.0),
                ), //boxdecoration
                child: Column(
                  children: [
                    SizedBox(height: 10),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      padding: EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(15),
                      ), //decoration
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
                          ), //text
                          Container(
                            height: 26,
                            width: 26,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50.0),
                              border: Border.all(color: Colors.grey),
                            ), //boxdecoration
                          ), //container
                        ], //widget
                      ), //row
                    ), //container
  
  </code></pre>
  <p>**
  and here is my full code
  **</p>
  <pre><code>
  
  
  import 'package:flutter/material.dart';
  import '../HomePage.dart';
  
  class UsaTwo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back_ios_rounded,
              color: Colors.black,
            ),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =&gt; HomePage(),
                  ));
            },
          ),
          backgroundColor: Colors.transparent,
          elevation: 0.0,
        ), //appbar
        body: Column(
          children: &lt;Widget&gt;[
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              padding: EdgeInsets.all(8.0),
              height: 200.0,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
                color: Colors.white,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    '1/10',
                    style: TextStyle(color: Colors.grey[800], fontWeight: FontWeight.bold, fontSize: 20), //textstyle
                  ), //text
                  SizedBox(height: 10),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: SingleChildScrollView(
                          scrollDirection: Axis.vertical,
                          child: Text(
                            'Question iehfueufbueo bfe bfue bfbuhfih fbeh bfehf bfuwe bfueh fbueh fbeu bfuebi eefojbeb', maxLines: 5, style: TextStyle(color: Colors.black87, fontWeight: FontWeight.bold, fontSize: 20), //textstyle
                          ),
                        ),
                      ),
                    ],
                  ), //text
                ],
              ), //column
            ), //container
            SizedBox(height: 20),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(bottom: 10),
                padding: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25.0),
                ), //boxdecoration
                child: Column(
                  children: [
                    SizedBox(height: 10),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      padding: EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(15),
                      ), //decoration
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
                          ), //text
                          Container(
                            height: 26,
                            width: 26,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50.0),
                              border: Border.all(color: Colors.grey),
                            ), //boxdecoration
                          ), //container
                        ], //widget
                      ), //row
                    ), //container
                    SizedBox(height: 10),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      padding: EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(15),
                      ), //decoration
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
                          ), //text
                          Container(
                            height: 26,
                            width: 26,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50.0),
                              border: Border.all(color: Colors.grey),
                            ), //boxdecoration
                          ), //container
                        ], //widget
                      ), //row
                    ), //container
                    SizedBox(height: 10),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      padding: EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(15),
                      ), //decoration
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
                          ), //text
                          Container(
                            height: 26,
                            width: 26,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50.0),
                              border: Border.all(color: Colors.grey),
                            ), //boxdecoration
                          ), //container
                        ], //widget
                      ), //row
                    ), //container
                    SizedBox(height: 10),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      padding: EdgeInsets.all(8.0),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey),
                        borderRadius: BorderRadius.circular(15),
                      ), //decoration
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16), //textStyle
                          ), //text
                          Container(
                            height: 26,
                            width: 26,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50.0),
                              border: Border.all(color: Colors.grey),
                            ), //boxdecoration
                          ), //container
                        ], //widget
                      ), //row
                    ), //container
                    SizedBox(height: 20),
                    Expanded(
                      child: Container(
                        height: 100,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: &lt;Widget&gt;[
                            Directionality(
                              textDirection: TextDirection.ltr,
                              child: Center(
                                child: RaisedButton.icon(
                                  onPressed: () {},
                                  color: Colors.blueAccent,
                                  icon: Icon(Icons.arrow_back_ios_rounded, color: Colors.white),
                                  label: Text(
                                    'Back',
                                    style: TextStyle(color: Colors.white, fontSize: 20),
                                  ),
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
                                ),
                              ),
                            ), //raisedbutton
                            Directionality(
                              textDirection: TextDirection.rtl,
                              child: Center(
                                child: RaisedButton.icon(
                                  onPressed: () {},
                                  color: Colors.blueAccent,
                                  icon: Icon(Icons.arrow_back_ios_rounded, color: Colors.white),
                                  label: Text('Next', style: TextStyle(color: Colors.white, fontSize: 20)),
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
                                ),
                              ),
                            ), //raisedbutton
                          ], //widget
                        ), //row
                      ),
                    ), //container
                  ], //children
                ), //column
              ), //container
            ), //expanded
          ], //children
        ), //column
      ); //scaffold
    }
  }
  
  
  
  </code></pre>