Dropdownbutton Flutter

Question

I created a dropdownbutton, after i chose something the area is grey. Is it possible to get it away? I don´t know if theres an property to do it, but can´t find one yet.

The code looks like this:

Container(
                      child: const Text('Multiplechoice?',
                          style: TextStyle(fontSize: 16)),
                      alignment: Alignment.center,
                      padding: const EdgeInsets.fromLTRB(0, 0, 10.0, 0),
                      margin: const EdgeInsets.fromLTRB(0, 0, 0, 15.0)),
                  Container(
                    width: 300,
                    padding: const EdgeInsets.symmetric(
                        horizontal: 8, vertical: 2),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(color: Colors.black, width: 2),
                    ),
                    child: DropdownButtonHideUnderline(
                        child: DropdownButton<DropdownOption>(
                      value: service.getSeventhOption,
                      isExpanded: true,
                      hint: const Text('Please choose'),
                      style: Constants.questionStyle,
                      iconSize: 20,
                      icon: const Icon(Icons.arrow_drop_down,
                          color: Colors.black),
                      onChanged: (DropdownOption? newValue) {
                        service.setSeventhOption = newValue!;
                      },
                      items: service.seventhDropdown
                          .map((DropdownOption option) {
                        return DropdownMenuItem<DropdownOption>(
                          value: option,
                          child: Text(option.text!),
                        );
                      }).toList(),
                    )),
                  ),,

quoci · Accepted Answer · 2022-03-13T17:39:55.883

The grey area indicates that your DropdownButton is currently focused. After selecting a value in your DropdownButton, the focus remains on it. This is the reason why it is grey. If you focus something else e.g. a button or on the screen, they grey color will disappear, since it isn't on focus anymore.
If you want to change the color of the grey area, you can set the focusColor.

DropdownButton<DropdownOption>(
  focusColor: Colors.transparent,
  ...
),

score 0 · Answer 2 · answered Mar 15 '22 at 07:41

///you can try this way I created my dropdown like this. hope this will work for you

  var _currentSelectedValue;
  var _currencies = [
    "Train",
    "Flight",
    "Car",
    "Dinner",
    "BreakFast",
    "Lunch",
    "Accommodation",
    "Mileage Allowance",
  ];



 FormField<String>(
                                builder: (FormFieldState<String> state) {
                                  return Container(
                                    width: _width! * 0.90,
                                    child: InputDecorator(
                                      decoration: InputDecoration(
                                        contentPadding:
                                            EdgeInsets.fromLTRB(10, 10, 10, 15),
                                        /*contentPadding:
                                    EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),*/
                                        isDense: true,
                                        errorStyle: TextStyle(
                                            color: Colors.redAccent,
                                            fontSize: 16.0),
                                        hintText: 'Please select expense',
                                        labelStyle: TextStyle(
                                            color: AppColors.hotelListDarkBlue),
                                        hintStyle: TextStyle(
                                            color: AppColors.hotelListDarkBlue),
                                        border: OutlineInputBorder(
                                          borderRadius: BorderRadius.circular(10.0),
                                          borderSide: BorderSide(
                                            color: AppColors.textFieldColor,
                                          ),
                                        ),
                                        focusedBorder: OutlineInputBorder(
                                          borderRadius: BorderRadius.circular(10.0),
                                          borderSide: BorderSide(
                                            color: AppColors.baseLightBlueColor,
                                          ),
                                        ),
                                      ),
                                      isEmpty: _currentSelectedValue == '',
                                      child: DropdownButtonHideUnderline(
                                        child: DropdownButton<String>(
                                          icon: Icon(
                                            Icons.arrow_drop_down_sharp,
                                            color: AppColors.baseLightBlueColor,
                                          ),
                                          hint: Text(
                                            'Please select expense',
                                            style: TextStyle(
                                                color: AppColors.hotelListDarkBlue),
                                          ),
                                          value: _currentSelectedValue,
                                          isDense: true,
                                          onChanged: (String? newValue) {
                                            setState(() {
                                              _currentSelectedValue = newValue;
                                              state.didChange(newValue);
                                            });
                                          },
                                          items: _currencies.map((String value) {
                                            return DropdownMenuItem<String>(
                                              value: value,
                                              child: Text(value),
                                            );
                                          }).toList(),
                                        ),
                                      ),
                                    ),
                                  );
                                },
                              ),

Dropdownbutton Flutter

2 Answers2