Flutter DropdownButton widget with Getx

Question

I'm in the process of learning GetX state management and stumble upon the DropdownButton widget. How do I update the selected value with the selected value cannot be observed. Here is my DropdownButton widget

              DropdownButton(
                  hint: Text(
                    'Book Type',
                  ),
                  onChanged: (newValue) {
                    print(newValue);
                  },
                  value: selectedType,
                  items: bookController.listType.map((selectedType) {
                    return DropdownMenuItem(
                      child: new Text(
                        selectedType,
                      ),
                      value: selectedType,
                    );
                  }).toList(),
                ),

The

var selectedType;

declared in the widget build. I tried to make this variable observable but the layout throws an overflow error. I also wrap the widget with obx but still, it throws the same error. How do exactly this widget implement using GetX. I'm pulling my hair here. I can work with other widgets with getX.

Tony · Accepted Answer · 2021-10-28 01:31:02Z

9

First create your controller class.

class BookController extends GetxController {

   // It is mandatory initialize with one value from listType
   final selected = "some book type".obs;

   void setSelected(String value){
     selected.value = value;
   }

}

On the view, instantiate your Controller and wrap the DropdownButton with an Obx widget:

    BookController bookcontroller = BookController();
    
    Obx( () => DropdownButton(
                      hint: Text(
                        'Book Type',
                      ),
                      onChanged: (newValue) {
                        bookController.setSelected(newValue);
                      },
                      value: bookController.selected.value,
                      items: bookController.listType.map((selectedType) {
                        return DropdownMenuItem(
                          child: new Text(
                            selectedType,
                          ),
                          value: selectedType,
                        );
                      }).toList(),
                    )
),

edited Oct 28, 2021 at 1:31

Tony

2,75814 gold badges43 silver badges76 bronze badges

answered Mar 10, 2021 at 3:37

djalmafreestyler

1,9396 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arul Over a year ago

i get following error The following assertion was thrown building Obx(dirty, state: _ObxState#829ce): There should be exactly one item with [DropdownButton]'s value: . Either zero or 2 or more [DropdownMenuItem]s were detected with the same value 'package:flutter/src/material/dropdown.dart': Failed assertion: line 850 pos 15: 'items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) {

djalmafreestyler Over a year ago

The "value:" parameter must be one of the List of values (items parameter) passed to the Dropdown or null so it shows the hint parameter value.

Arul Over a year ago

Yeah i figured it out, is any chance we can default in value, like its empty filed.

Muhammad Sheraz · Accepted Answer · 2021-07-06 08:01:50Z

if you don't want to use observable variable then wrap your dropdown with getBuilder and in onChange function just update your controller like

               onChanged: (newValue) {
                     bookController.currentDropdownValue=newValue;
                    bookController.update();
                  },

Example

//Controller
class HomeController extends GetxController {
 var selectedDrowpdown = 'abc';
 List dropdownText = ['abc', 'def', 'ghi'];
  }
    //dropdown button in Ui 
  DropdownButton(
    hint: Text(
      'Book Type',
    ),
    onChanged: (newValue) {
      homeController.selectedDrowpdown=newValue;
      homeController.update();
    },
    value: homeController.selectedDrowpdown,
    items: [
      for (var data in homeController.dropdownTextList)
        DropdownMenuItem(
          child: new Text(
            data,
          ),
          value: data,
        )
    ])

janw · Accepted Answer · 2022-06-04 18:09:27Z

3

final selected = "".obs;

BookController bookcontroller = BookController();
    
Obx( () => DropdownButton(
                  hint: Text(
                    'Book Type',
                  ),
                  onChanged: (newValue) {
                    bookController.setSelected(newValue);
                  },
                  value: bookController.selected.value==""?null:bookController.selected.value,
                  items: bookController.listType.map((selectedType) {
                    return DropdownMenuItem(
                      child: new Text(
                        selectedType,
                      ),
                      value: selectedType,
                    );
                  }).toList(),
                )
),

Try this, this worked for me.

edited Jun 4, 2022 at 18:09

janw

9,85613 gold badges52 silver badges71 bronze badges

answered Jun 2, 2022 at 10:57

Sharad Gore

492 bronze badges

Collectives™ on Stack Overflow

Flutter DropdownButton widget with Getx

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related