** 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.
here is my container 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
** and here is my full 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) => HomePage(),
));
},
),
backgroundColor: Colors.transparent,
elevation: 0.0,
), //appbar
body: Column(
children: <Widget>[
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: <Widget>[
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
}
}
CodePudding user response：
Wrap your container with GestureDetection and check whether its is correct answer or not. then you can change color according to it.
your class should to be statefull as well.
CodePudding user response：
Well first, your widget needs to be a Stateful one, because when you pick one answer, in order for your answer colours containers to change, you need some sort of state to change it. Or you can use a ternary operator:
bool colourOfcontainerIsRed false;
OnPressed: (){
checkAnswer(); //some sort of method that checks that the user clicked one of the answers and check it if it is correct
setState(() {
colourOfcontainerIsRed == true;
});
}
Container colours change based on the ternary operator that is changed from the setState method:
Container (
color: colourOfcontainerIsRed == false ? Colors.grey : Colors.red //this works like this: checks if the colourOfcontainerIsRed is false, if it is, the colour should be grey, if it is true, hey put the red colour
)
You can do the same for the rest of the colours you need. This is not the most clean solution but it works, for better usage for your question, you can use some sort of state management, like Provider.