How to show hinttext in DropdownBelow which should not be in its list-CodePudding

I want to add hintText in DropdownBelow, but it is overriding it with its value, and if pass empty string in value like this.

 var _selectedCategory = "";

it print this error

'package:dropdown_below/dropdown_below.dart': Failed assertion: line 421 pos 16: 'value == null ||
package:dropdown_below/dropdown_below.dart:1
            items
                    .where((DropdownMenuItem<T> item) => item.value == value)
                    .length ==
                1': is not true.

which means u can't pass null value and u have to pass that item in value which should be in its list, like if my dropdown list is this,

var categorylist = <String>[
    'Other',];

then value should have Other , var _selectedCategory = "Other";

so it mean i can't use hintText anymore.

here is my dropdown code.

var categorylist = <String>[
    'Other',
  ];

var _selectedCategory = "Other";


Container(
              width: MediaQuery.of(context).size.width * 0.9,
              child: DropdownBelow(
                itemWidth: 370,
                itemTextstyle: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Colors.black),
                boxTextstyle: TextStyle(
                    //fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Colors.black),
                boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
                boxWidth: 370,
                boxHeight: 50,
                boxDecoration: BoxDecoration(
                    color: Colors.transparent,
                    shape: BoxShape.rectangle,
                    borderRadius:
                        new BorderRadius.all(new Radius.circular(10.0)),
                    border: Border.all(width: 1, color: Colors.grey)),
                icon: Icon(
                  Icons.keyboard_arrow_down_outlined,
                  color: Colors.black,
                ),
                hint: Text('Category',
                    style: GoogleFonts.montserrat(
                        color: HexColor("#6e6b7b"), fontSize: 15)),
                value: _selectedCategory,
                items:categorylist.map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value,
                          style: GoogleFonts.montserrat(
                            color: HexColor("#6e6b7b"),
                          )));
                }).toList(),
                onChanged: (newValue) {
                  setState(() {
                    this._selectedCategory = newValue.toString();
                    if (this._selectedCategory == "Other") {
                      _newCatgoryFlag = true;
                    } else {
                      _newCatgoryFlag = false;
                    }
                  });
                },
              ),
            ),

output

this is what i get when i run the app.

please tell me where i'm doing wrong. what i have to do to show hintText

CodePudding user response：

dropDown get initial value here value: _selectedCategory try to remove it and you will get your hintText

but better change

var _selectedCategory = "Other";

String? _selectedCategory;

and when will you choose _selectedCategory will replace hintText