How to update Text using a DropdownButton? - flutter

Question

I want to use the result of my DropdownButton to change some text displayed, how would I achieve this?
I have attempted to use a textControlEditor, but I can't make this work with Text.
I want the text to display the advice as the text, which shoiuld be based on value
This is my DropdownButton :
child: Container(
width: 300,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
decoration: BoxDecoration(
border: Border.all(color: Color(0xff202124), width: 3.0),
color: Colors.white,
borderRadius: BorderRadius.circular(30)),
child: DropdownButton<String>(
onChanged: (value){
setState(() {_selectedColor = value;});
if (value == 'basic') advice = 'Have a great day!';
else if (value == 'Tired') advice = 'Have a rest today!';
else if (value == 'Happy') advice = 'Try to get lots of work done today!';
else if (value == 'Sad') advice = 'Take some time for yourself today';
else if (value == 'Bored') advice = 'Go on a walk and then get back to working';
else if (value == 'Productive') advice = 'Use that productivity';
else advice = 'Good luck today!';
print(advice);
//update text here
},
value: _selectedColor,
underline: Container(),
hint: Center(
child: Text('How have you been feeling today?',
style: TextStyle(color: Color(0xffA9A9A9)),)),
icon: Icon(
Icons.arrow_downward,
color: Color(0xffA9A9A9),
),
isExpanded: true,
items: _emotion
.map((e) => DropdownMenuItem(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
e,
style: TextStyle(fontSize: 18),
),
),
value: e,
)).toList(),
selectedItemBuilder: (BuildContext context) => _emotion
.map((e) => Center(
child: Text(
e,
style: const TextStyle(
fontSize: 18,
color: Color(0xffA9A9A9),
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
))
.toList(),
),
)),
and here is where I want the text to change:
Expanded(
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(20),
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Color(color),
),
child: Center(
child: Text(
advice,
style: TextStyle(fontFamily: 'Arial', fontSize: 18, color: Colors.white, height: 1, ),
textAlign: TextAlign.center,
)
),
),
),
If the whole code is required I am more than happy to share that as well, thank you!

Answer 1

Okay so here you have to create a function which returns String value. This string value will be the value which you select from the drop-down button.
Here's an example:
String getAdvice() {
if (selectedDropDownValue == 'DefaultValue') {
return 'Default Text';
} else {
return '$selectedDropDownValue';
}
}
And then call this function inside the Text Widget where you want the selected advice to appear. Like this:
child: Center:
child: Text(
getAdvice(), //This is the updated line from your code
style: TextStyle(fontFamily: 'Arial', fontSize: 18, color: Colors.white, height: 1, ),
textAlign: TextAlign.center,
),
),
Hope that answers your question. Feel free to clear up any confusions.