Search code examples
flutterdartdropdown

DropDown Menu isn't updating when something is selected(Flutter)


I am trying to create a DropDown menu in my Flutter project, but it's value doesn't change when I press on a value. I've tried several different codes and tutorials, but it never seems to change. Here is my code:

    body: Container(
      padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
      child: Column(
        children: <Widget>[
          TextField(
            controller: myController,
            decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Title',
                hintText: 'What will you call your grocery list?'),
          ),
          Row(
            children: <Widget>[
              Text(
                'Remind me every ',
                style: GoogleFonts.biryani(fontSize: 15.0),
              ),
              new DropdownButton<String>(
                value: 'Wednesday',
                items: <String>[
                  'Sunday',
                  'Monday',
                  'Tuesday',
                  'Wednesday',
                  'Thursday',
                  'Friday',
                  'Saturday'
                ].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (_) {},
              ),
            ],
          )
        ],
      ),
    )

Also, this code is inside of a class separate from the mainpage of the file, which is also a stateful widget. Basically, I'll end up with two stateful widgets, the main page, and this page, and it won't let me create two states. Here is the error it gives me:

The name 'createState' is already defined.
Try renaming one of the declarations.dartduplicate_definition

Solution

  • UPDATE

    -----------------------

    Just use two separate and different Stateful widget, one for the page and one for the selector, Check this dartpad to better understand how you can split your StatefulWidget into two separate StatefulWidgets

    https://dartpad.dev/b07af2a7d088caeb312e5fc0cf6c5f10

    -----------------------

    You have HardCoded you "Wednesday" value, you should put it in a variable and set it on the on changed method, of course all of this should be done inside a StatefulWidget because you are managing the state

    Your stateful widget

    class TestWidget extends StatefulWidget {
      @override
      _TestWidgetState createState() => _TestWidgetState();
    }
    

    Your State

    class _TestWidgetState extends State<TestWidget> {
    
      //Your String used for defining the selection**
      String _currentSelection = "Wednesday";
    
      //Your build method    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("DropDownSample"),
            ),
            body: Container(
              padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text('Remind me every '),
                      DropdownButton<String>(
                        //Don't forget to pass your variable to the current value
                        value: _currentSelection,
                        items: <String>[
                          'Sunday',
                          'Monday',
                          'Tuesday',
                          'Wednesday',
                          'Thursday',
                          'Friday',
                          'Saturday'
                        ].map((String value) {
                          return new DropdownMenuItem<String>(
                            value: value,
                            child: new Text(value),
                          );
                        }).toList(),
                        //On changed update the variable name and don't forgot the set state!
                        onChanged: (newValue) {
                          setState(() {
                            _currentSelection = newValue;
                          });
                        },
                      ),
                    ],
                  )
                ],
              ),
            ));
      }
    }
    

    Check also why you should use the setState when updating a variable ;) https://flutter.dev/docs/development/ui/interactive