Make a specific action exlusive to only one Button - oop

Question

I'm new to flutter and OOP in general, I'm making an app that tells you to chose an article for a German word.
I want to know how to change the color of the pressed button only depending on if the answer is correct or no and disabling all the buttons in the same time. but when pressed all the 3 buttons change color and are disabled.
here is my button class
import 'package:flutter/material.dart';
class ArticleButton extends StatelessWidget {
#override
final String article;
final Function check;
final bool onPushed;
final Color bgColor;
ArticleButton({this.article,this.check,this.onPushed,this.bgColor});
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: FlatButton(
onPressed: onPushed? check:null,
child: Text(
"$article",
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Roboto',
),),
splashColor: Colors.grey,
disabledColor: bgColor,
),
);
}
}
here is my main function
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'services/word.dart';
import 'package:germanarticle/button.dart';
void main() {
runApp(MaterialApp(
home: Home(),
));
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<Word> words =[
Word(article: "Der",word: "Apfel"),
Word(article: "Die",word: "Erdbeere"),
Word(article: "Das",word: "Auto"),
];
List<String> articles=['Der',"Die","Das"];
int index =0;
int score =0;
bool enabled=true;
Color bgColor=Colors.blue;
#override
Widget build(BuildContext context) {
return Scaffold(
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("$score"),
Text("${words[index].word}"
,style: TextStyle(
fontSize: 60.0,
),
),
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:
articles.map((e)=>ArticleButton(
article:e,
check:(){
if (words[index].article == e){
setState(() {
score++;
bgColor=Colors.green;
}
);
}else{
setState(() {
enabled=false;
bgColor=Colors.red;
});
}
},onPushed: enabled,
bgColor: bgColor,
)
).toList(),
),
FlatButton(
onPressed: () {
setState(() {
index++;
enabled =true;
});
},
child: Text("next"),
)
],
),
);
}
}
thank you

Answer 1

Try this, it works perfectly:
// an enum for all your button state
enum ButtonStatus {correct, wrong }
// get the color of your button based on the button state
Color getButtonStatus(ButtonStatus buttonStatus) {
switch (buttonStatus) {
case ButtonStatus.correct:
return Colors.green;
break;
case ButtonStatus.wrong:
return Colors.red;
break;
default:
return Colors.blue;
break;
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<Word> words = [
Word(article: "Der", word: "Apfel"),
Word(article: "Die", word: "Erdbeere"),
Word(article: "Das", word: "Auto"),
];
// define a button status object here
ButtonStatus buttonStatus;
List<String> articles = ['Der', "Die", "Das"];
int index = 0;
int score = 0;
Color bgColor = Colors.blue;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("$score"),
Text(
"${words[index].word}",
style: TextStyle(
fontSize: 60.0,
),
),
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: articles
.map((e) => ArticleButton(
article: e,
check: () {
if (words[index].article == e) {
setState(() {
score++;
// change the color of the button if correct
buttonStatus = ButtonStatus.correct;
});
} else {
setState(() {
// change the color of the button if wrong
buttonStatus = ButtonStatus.wrong;
});
}
},
onPushed: enabled,
bgColor: bgColor,
))
.toList(),
),
FlatButton(
// add the color to your flat button, it changes if the answer is correct or wrong and if the button is disabled
color: getButtonStatus(buttonStatus),
onPressed: () {
setState(() {
index++;
});
},
child: Text("next"),
)
],
),
);
}
}
I hope this helps.

Answer 2

Thats because you aren't changing your index variable inside map function, so it is 0 all the way. Provide some screenshots / sketches about what are you trying to achieve with the app.