How to update Text using a DropdownButton?

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.