DropdownButtonFormField doesn't apply custom InputDecoration style

25 Views Asked by At

enter image description here I have my custom TextFieldInputDecoration, which extends InputDecoration. I use it for TextFormField widgets. Also I've tried to apply it for DropdownButton, and it worked, custom properties were applied. But I need to have validation on my dropdown, so I've changed DropdownButton to DropdownButtonFormField and now the height of button is bigger and I have the problem with error validation text. The text is not aligned to the left and it is background color. I had the same problem with TextFormField, but I've resolved it by adding DecoratedInputBorder. My dropdown


class DropdownFormField extends FormField<String> {
 ....

  DropdownFormField({
    super.key,
   ....
  }) : super(
          builder: (FormFieldState<String> state) {
            return InputDecorator(
              decoration: TextFieldInputDecoration(
                prefixIcon: prefixIcon,
                context: context,
              ),
              child: DropdownButtonHideUnderline(
                child: DropdownButtonFormField(
                  value: value,
                  icon: const Icon(Icons.keyboard_arrow_down_outlined,
                      color: Colors.grey),
                  isDense: true,
                  onChanged: onChanged,
                  validator: validator,
                  items: items.map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                ),
              ),
            );
          },
        );

  @override
  FormFieldState<String> createState() => _DropdownFormFieldState();
}

class _DropdownFormFieldState extends FormFieldState<String> {
  @override
  DropdownFormField get widget => super.widget as DropdownFormField;
}

and my InputDecorator


class TextFieldInputDecoration extends InputDecoration {
  final BuildContext context;

  TextFieldInputDecoration({
    required this.context,
  }) : super(
          fillColor: BAColors.greyTextField,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          alignLabelWithHint: true,
          isDense: true,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 0, horizontal: 14),
          errorMaxLines: 2,
          border: DecoratedInputBorder(
            child: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide.none,
            ),
            shadow: [
              BoxShadow(
                color: BAColors.black.withOpacity(0.05),
                offset: const Offset(0, 2),
                blurRadius: 1,
              ),
            ],
          ),
        );
}

I've tried to add Container with fixed height(44px) over DropdownButtonHideUnderline, but I couldn't see my value. For issue about background color, I've tried add decoration straight to DropdownFormField, but it doesn't work. In the image the field in the middle is field with issues

0

There are 0 best solutions below