Andrey Khan
Andrey Khan

Reputation: 183

clear DropDownButton flutter

i have a DropDownButton which add category for my product. after added product DropDownButton display category which i choosed. I want to refresh or clear DropDownButton after adding product. Better to display hint text.

code:

 child: StreamBuilder<List<Categories>>(
                              stream: categories,
                              builder: ((context, snapshot) {
                                if (!snapshot.hasData)
                                  return CircularProgressIndicator();
                                return DropdownButton(
                                  hint: Text('choose category'),
                                  value: _currentCategory,
                                  items: snapshot.data
                                      .map((doc) => DropdownMenuItem(
                                            child: Text(doc.categoryname),
                                            value: doc,
                                          ))
                                      .toList(),
                                  onChanged: (selectedCategory) =>
                                      setState(() {
                                    _currentCategory = selectedCategory;
                                  }),
                                );
                              })),
                        ),
                        SizedBox(height: 15),
                        RaisedButton(
                          onPressed: () {
                            if (_formKeyProduct.currentState.validate()) {
                              ProductService().addProduct(
                                  _nameproductController.text,
                                  _priceproductController.text,
                                  _currentCategory.categoryname.toString());
                              _formKeyProduct.currentState.reset();
                              _nameproductController.clear();
                              _priceproductController.clear();
                            }
                          },
                          child: Text('add product'),

Upvotes: 1

Views: 5733

Answers (2)

Zhar
Zhar

Reputation: 3540

This is a complete widget including a button to reset the dropdown value. It is based on provider package. The widget include a button to clear selection.

class MyDataDropDown extends StatelessWidget {

  @override
  Widget build(final BuildContext context) {
    return Consumer<HomeModel>(
      builder: (context, model, child) {
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(10)),

          child: Row(
            children: [
              Expanded(
                child: DropdownButton<SearchMyData>(
                  isExpanded: true,
                  value: model.currentMyData,
                  onChanged: (final SearchMyData? newValue) {
                    model.setCurrentMyData(newValue);
                  },
                  items: model.data.map<DropdownMenuItem<SearchMyData>>((SearchMyData value) {
                    return DropdownMenuItem<SearchMyData>(
                      value: value,
                      child: Text(MyDataDataUtils.getMyDataLabelDropDown(value), overflow: TextOverflow.ellipsis),
                    );
                  }).toList(),
                  // add extra sugar..
                  hint: const Text("Pick a data"),
                  icon: const Icon(Icons.arrow_drop_down),
                  underline: const SizedBox(),
                ),
              ),
              IconButton( // clear dropdown button
                  onPressed: () => model.setCurrentMyData(null),
                  icon: Icon(Icons.clear))
            ],
          ),
        );
      },
    );
  }
}

Provider class

  class HomeModel extends ChangeNotifier{
    
      ....
      
      UnmodifiableListView<SearchTheme> get data => UnmodifiableListView([your data here]);

      SearchMyData? _selectedMyData;
    
      SearchMyData? get currentMyData => _selectedMyData;
    
      setCurrentMyData(final SearchMyData? item) {
        _selectedMyData = item;
        notifyListeners();
      }
    }

Now you have a complete dropdown including clear selection button.

Upvotes: 0

Stijn2210
Stijn2210

Reputation: 884

Since the value you chose is _currentCategory using

setState(() {
    _currentCategory = null;
  }
)

should do the trick.

EDIT:

I see some downvotes on this. This answer was based on Flutter 1.22.6. If it doesn't work on Flutter 2 that is why.

Upvotes: 4

Related Questions