Flutter: Change text colour of a widget, when a button is pressed - flutter

Question

I have 2 Pieces of text, which come from an API call, one in German, one translated in English, they are fed as parameters into a Basic Template, which holds custom styling of the Text. The second Text, the translation is the same colour as the background and when the Reveal button is pressed, I would like the colour to become white (visible). An image for clarity:
How would I change the colour of the second text, I am unsure due to feeding the data through the custom made templates (See code below). Any point in the right direction appreciated.
Main Class
class MistakesScreen extends StatefulWidget {
String username;
MistakesScreen({this.username});
#override
_MistakesScreenState createState() => _MistakesScreenState();
}
class _MistakesScreenState extends State<MistakesScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello ${widget.username}"),
),
body: Container(
child: FutureBuilder(
future: fetchGermanPhrases(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('Connection State None');
case ConnectionState.active:
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
case ConnectionState.done:
var gname = snapshot.data['gname'].toString();
var ename = snapshot.data['ename'].toString();
return BasicExerciseTemplate(textOne: gname, textTwo: ename);
default:
return Center(child: CircularProgressIndicator());
}
},
),
),
);
}
}
Templates and Button Code:
class BasicTextTemplate extends StatelessWidget {
final String text;
final Color colour;
BasicTextTemplate({this.text, this.colour});
#override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(16),
child: Text(
text,
style: TextStyle(
color: colour,
fontSize: 30,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
),
width: 350,
decoration: BoxDecoration(
color: Colors.green.shade800,
borderRadius: BorderRadius.circular(8),
),
),
);
}
}
class BasicExerciseTemplate extends StatelessWidget {
final String textOne;
final String textTwo;
BasicExerciseTemplate({this.textOne, this.textTwo});
#override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: BasicTextTemplate(text: textOne, colour: Colors.white),
),
Padding(
padding: const EdgeInsets.all(8.0),
child:
BasicTextTemplate(text: textTwo, colour: Colors.green.shade800),
),
RevealButton()
],
),
);
}
}
class RevealButton extends StatelessWidget {
final String textOne;
final String textTwo;
RevealButton({this.textOne, this.textTwo});
#override
Widget build(BuildContext context) {
return Center(
child: FlatButton(
child: Text('Reveal'),
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {
print('Reveal Pressed');
},
),
);
}
}

Answer 1

Try this
isReveal = false;
onPressed: () {
setState(() {
IsReveal = true
});
},
BasicTextTemplate(text: textTwo, colour:!isReveal ? Colors.green.shade800:Colors.white);

Answer 2

To achieve what you are trying, I recommend you to use the Visibility widget. It controls whether the given child is visible or not. I think it'll be much easier.
For instance:
Visibility(
visible: myBoolean,
child: Text(
"Die Deutschen sind sehr nett",
style: TextStyle(fontSize: 20),
),
),
Simply use a function where you change the value of your boolean and trigger the setState method. That way you'll be able to hide or show your texts depending on a condition. For more info, see:
https://api.flutter.dev/flutter/widgets/Visibility-class.html