下拉按钮颤动

Question

我创建了一个下拉按钮，在我选择了一些东西之后该区域是灰色的。有可能把它拿走吗？我不知道是否有属性可以做到这一点，但还找不到。

代码如下所示：

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(),
                    )),
                  ),,

Answer 1

灰色区域表示您的 DropdownButton 当前处于专注状态。在您的 DropdownButton 中选择一个 value 后，焦点仍然在它上面。这就是为什么它是灰色的原因。如果你专注于其他事情，例如一个按钮或在屏幕上，它们的灰色会消失，因为它不再是焦点。
如果要改变灰色区域的颜色，可以设置focusColor.

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

Answer 2

///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

web

dart

flutter

dropdownbutton