Home > Blockchain >  strange grey background color on focus of dropdown
strange grey background color on focus of dropdown

Time:04-28

This wasn't happening before, but now is happening all over my app within all my dropdown buttons and dropdown multi selects. A grey background color shows only when the field is focused. I'm not sure how it's come about because I haven't changed the code for a while for these widgets. I assumed it was a theme issue, but checked all over my app and couldn't find anything. What could be causing this grey background color? Image below.

usage:

                          AVSODropdownButtonString(
                            hint: ConstantsStringNames.DROPDOWN_HINT_REGION,
                            width: 80,
                            value: editedShopInfo?.region != null
                                ? getLabel(_regions, editedShopInfo.region)
                                : null,
                            items: _regions.map<DropdownMenuItem<String>>(
                                (DropdownContent value) {
                              return DropdownMenuItem<String>(
                                value: value.optionLabel,
                                child: Text(
                                  value.optionLabel,
                                  style: ConstantsAvsoStyle.INFO_TABLE_VALUE,
                                ),
                              );
                            }).toList(),
                            onChanged: (String newValue) {
                              setState(() {
                                editedShopInfo.region =
                                    getValue(_regions, newValue);
                              });
                            },
                          ),

custom widget:

class AVSODropdownButtonString extends StatelessWidget {
  const AVSODropdownButtonString({
    Key key,
    this.width,
    this.onTap,
    @required this.onChanged,
    @required this.value,
    @required this.items,
    this.hint,
  }) : super(key: key);

  final double width;
  final Function onChanged;
  final String value;
  final List<DropdownMenuItem<String>> items;
  final String hint;
  final Function onTap;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 38,
      padding: EdgeInsets.only(
        left: 8.0,
        right: 5.0,
      ),
      width: width,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(width: 1, color: AVSOColors.grey),
        borderRadius: BorderRadius.circular(5.0),
      ),
      child: DropdownButton<String>(
        onTap: onTap,
        isExpanded: true,
        hint: hint != null
            ? Text(
                hint,
                style: ConstantsAvsoStyle.INFO_TABLE_VALUE,
              )
            : null,
        underline: DropdownButtonHideUnderline(
          child: SizedBox(),
        ),
        value: value,
        icon: AVSOIcons.arrowDown,
        onChanged: onChanged,
        items: items,
      ),
    );
  }
}

textstyle:

  static const TextStyle INFO_TABLE_VALUE = TextStyle(
    fontSize: 13.0,
    fontWeight: FontWeight.normal,
    fontFamily: 'Arial',
  );

enter image description here

CodePudding user response:

add this property into dropdown widget :
focusColor: Theme.of(context).scaffoldBackgroundColor,

  • Related