Need to change color of selected RadioListTile to green if user selects correct answer and red when wrong answer is selected - flutter

Question

I am creating an multiple choice quiz app using flutter, currently when user selects an answer in radio list tile it, will check for correct answer and show a toast message.
Need to update the code to highlight selected answer with green color if answer is correct
and red if the answer is wrong.
If any idea please update the code and share the code. Thanks in advance.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mechanicalaptitude/quiz/models/category.dart';
import 'package:mechanicalaptitude/quiz/models/question.dart';
import 'package:mechanicalaptitude/quiz/ui/pages/quiz_finished.dart';
import 'package:html_unescape/html_unescape.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:admob_flutter/admob_flutter.dart';
class QuizPage extends StatefulWidget {
final List<Question> questions;
final Category category;
const QuizPage({Key key, #required this.questions, this.category})
: super(key: key);
#override
_QuizPageState createState() => _QuizPageState();
}
class _QuizPageState extends State<QuizPage> {
final TextStyle _questionStyle = TextStyle(
fontSize: 18.0, //font size of the questions
fontWeight: FontWeight.bold,
color: Colors.red);
int _currentIndex = 0;
int i = 0;
int hint_index = 0;
var option1;
final Map<int, dynamic> _answers = {};
final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
Question question = widget.questions[_currentIndex];
final List<dynamic> options = question.incorrectAnswers;
if (!options.contains(question.correctAnswer)) {
options.add(question.correctAnswer);
//options.shuffle();
}
return WillPopScope(
onWillPop: _onWillPop,
child: Scaffold(
key: _key,
appBar: AppBar(
title: Text("Question No. - " + "${_currentIndex + 1}"),
backgroundColor: Colors.indigoAccent,
elevation: 10,
),
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Center(
child: Card(
elevation: 0.0,
child: Container(
//padding: EdgeInsets.all(0.0),
width: double.infinity,
height: 900,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 10.0),
Expanded(
child: Text(
HtmlUnescape().convert(
widget.questions[_currentIndex].question),
softWrap: true,
textAlign: TextAlign.justify,
style: _questionStyle,
),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 10.0),
Expanded(
child: Image.network(
HtmlUnescape().convert(
widget.questions[_currentIndex].qimgurl),
// width: 300,
fit: BoxFit.fitWidth,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes !=
null
? loadingProgress
.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes
: null,
),
);
},
)),
],
),
//SizedBox(height: 0.0),
Card(
//elevation: 10.0,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
...options.map((option) => RadioListTile(
title: Text(
HtmlUnescape().convert("$option"),
style: TextStyle(color: Colors.black),
),
groupValue: _answers[_currentIndex],
value: option,
onChanged: (value) {
setState(() {
_answers[_currentIndex] = option;
if (i == 0) {
option1 = option;
}
if (option ==
widget.questions[_currentIndex]
.correctAnswer) {
i = 1;
Fluttertoast.cancel();
Fluttertoast.showToast(
msg: "Righ Answer",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.green,
textColor: Colors.white,
fontSize: 16.0);
} else {
i = 1;
Fluttertoast.cancel();
Fluttertoast.showToast(
msg: "Wrong Answer",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
}
});
},
)),
],
),
),
Expanded(
child: Container(
alignment: Alignment.topCenter,
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/* const SizedBox(height: 30),*/
/* RaisedButton(
child: Text('Hint'),
onPressed:_giveHint,
color:Colors.yellow, ),*/
const SizedBox(),
ButtonTheme(
minWidth: 200,
height: 50,
child: RaisedButton(
child: Text(_currentIndex ==
(widget.questions.length - 1)
? "Submit"
: "Next"),
onPressed: _nextSubmit,
color: Colors.yellow,
),
),
],
),
),
)
],
),
),
),
),
],
),
),
),
);
}
void _nextSubmit() {
if (_answers[_currentIndex] == null) {
_key.currentState.showSnackBar(SnackBar(
content: Text("You must select an answer to continue."),
));
return;
}
if (_currentIndex < (widget.questions.length - 1)) {
_answers[_currentIndex] = option1;
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Answer is'),
content: Text(widget.questions[_currentIndex].correctAnswer),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
setState(() {
_currentIndex++;
i = 0;
});
},
),
],
);
});
} else {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (_) => QuizFinishedPage(
questions: widget.questions, answers: _answers)));
}
}
Future<bool> _onWillPop() async {
return showDialog<bool>(
context: context,
builder: (_) {
return AlertDialog(
content: Text(
"Are you sure you want to quit the quiz? All your progress will be lost."),
title: Text("Warning!"),
actions: <Widget>[
FlatButton(
child: Text("Yes"),
onPressed: () {
Navigator.pop(context, true);
},
),
FlatButton(
child: Text("No"),
onPressed: () {
Navigator.pop(context, false);
},
),
],
);
});
}
}

Answer 1

There is an activeColor property in RadioListTile which lets you change color of the tile when it's selected.You can add a condition using ternary operator as follows to do the work for you:
activeColor: (option ==
widget.questions[_currentIndex]
.correctAnswer) ? Colors.green : Colors.red,
Complete Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mechanicalaptitude/quiz/models/category.dart';
import 'package:mechanicalaptitude/quiz/models/question.dart';
import 'package:mechanicalaptitude/quiz/ui/pages/quiz_finished.dart';
import 'package:html_unescape/html_unescape.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:admob_flutter/admob_flutter.dart';
class QuizPage extends StatefulWidget {
final List<Question> questions;
final Category category;
const QuizPage({Key key, #required this.questions, this.category})
: super(key: key);
#override
_QuizPageState createState() => _QuizPageState();
}
class _QuizPageState extends State<QuizPage> {
final TextStyle _questionStyle = TextStyle(
fontSize: 18.0, //font size of the questions
fontWeight: FontWeight.bold,
color: Colors.red);
int _currentIndex = 0;
int i = 0;
int hint_index = 0;
var option1;
final Map<int, dynamic> _answers = {};
final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
Question question = widget.questions[_currentIndex];
final List<dynamic> options = question.incorrectAnswers;
if (!options.contains(question.correctAnswer)) {
options.add(question.correctAnswer);
//options.shuffle();
}
return WillPopScope(
onWillPop: _onWillPop,
child: Scaffold(
key: _key,
appBar: AppBar(
title: Text("Question No. - " + "${_currentIndex + 1}"),
backgroundColor: Colors.indigoAccent,
elevation: 10,
),
body: Center(
child: ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Center(
child: Card(
elevation: 0.0,
child: Container(
//padding: EdgeInsets.all(0.0),
width: double.infinity,
height: 900,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 10.0),
Expanded(
child: Text(
HtmlUnescape().convert(
widget.questions[_currentIndex].question),
softWrap: true,
textAlign: TextAlign.justify,
style: _questionStyle,
),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 10.0),
Expanded(
child: Image.network(
HtmlUnescape().convert(
widget.questions[_currentIndex].qimgurl),
// width: 300,
fit: BoxFit.fitWidth,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes !=
null
? loadingProgress
.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes
: null,
),
);
},
)),
],
),
//SizedBox(height: 0.0),
Card(
//elevation: 10.0,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
...options.map((option) => RadioListTile(
title: Text(
HtmlUnescape().convert("$option"),
style: TextStyle(color: Colors.black),
),
activeColor: (option ==
widget.questions[_currentIndex]
.correctAnswer) ? Colors.green : Colors.red,
groupValue: _answers[_currentIndex],
value: option,
onChanged: (value) {
setState(() {
_answers[_currentIndex] = option;
if (i == 0) {
option1 = option;
}
if (option ==
widget.questions[_currentIndex]
.correctAnswer) {
i = 1;
Fluttertoast.cancel();
Fluttertoast.showToast(
msg: "Righ Answer",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.green,
textColor: Colors.white,
fontSize: 16.0);
} else {
i = 1;
Fluttertoast.cancel();
Fluttertoast.showToast(
msg: "Wrong Answer",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
}
});
},
)),
],
),
),
Expanded(
child: Container(
alignment: Alignment.topCenter,
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/* const SizedBox(height: 30),*/
/* RaisedButton(
child: Text('Hint'),
onPressed:_giveHint,
color:Colors.yellow, ),*/
const SizedBox(),
ButtonTheme(
minWidth: 200,
height: 50,
child: RaisedButton(
child: Text(_currentIndex ==
(widget.questions.length - 1)
? "Submit"
: "Next"),
onPressed: _nextSubmit,
color: Colors.yellow,
),
),
],
),
),
)
],
),
),
),
),
],
),
),
),
);
}
void _nextSubmit() {
if (_answers[_currentIndex] == null) {
_key.currentState.showSnackBar(SnackBar(
content: Text("You must select an answer to continue."),
));
return;
}
if (_currentIndex < (widget.questions.length - 1)) {
_answers[_currentIndex] = option1;
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Answer is'),
content: Text(widget.questions[_currentIndex].correctAnswer),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
setState(() {
_currentIndex++;
i = 0;
});
},
),
],
);
});
} else {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (_) => QuizFinishedPage(
questions: widget.questions, answers: _answers)));
}
}
Future<bool> _onWillPop() async {
return showDialog<bool>(
context: context,
builder: (_) {
return AlertDialog(
content: Text(
"Are you sure you want to quit the quiz? All your progress will be lost."),
title: Text("Warning!"),
actions: <Widget>[
FlatButton(
child: Text("Yes"),
onPressed: () {
Navigator.pop(context, true);
},
),
FlatButton(
child: Text("No"),
onPressed: () {
Navigator.pop(context, false);
},
),
],
);
});
}
}