I am trying to remove the vertical padding inside the dropdown and to change the border radius of the highlight of the selected item. I am using the flutter_form_builder package.
Here’s my current code:
FormBuilderDropdown<Experience>(
name: 'experience',
icon: AppIcon(
PhosphorIconsRegular.caretDown,
color: context.colorScheme.iconSecondary,
),
elevation: 4,
style: context.textTheme.text14Regular,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
color: context.colorScheme.borderPrimary,
),
borderRadius: BorderRadius.circular(borderRegular),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: context.colorScheme.borderPrimary,
),
borderRadius: BorderRadius.circular(borderRegular),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: context.colorScheme.borderPrimary,
),
borderRadius: BorderRadius.circular(borderRegular),
),
isDense: true,
),
items: Experience.values
.take(Experience.values.length - 1)
.map(
(experience) => DropdownMenuItem(
value: experience,
child: Container(
padding: EdgeInsets.zero,
child: Text(
context.l10n.experiences_600(experience.name),
),
),
),
)
.toList(),
)
Here’s what it looks like:
And here’s the visual I would like:
I have tried to change the theme, I have tried to wrap my item with a container and changing its Padding but it doesn’t change anything visually. I’ve also tried wrapping it directly with a Padding widget but it doesn’t work either. When I search for solutions, I find solutions that don’t work with this package and I am using it for all the forms in my application so I would like to keep it if possible.
1
InputDecoration has a contentPadding property. I would assign it EdgeInsets.zero and see if that works. The problem appears to be a default padding that needs to get set to zero.
Here is the example in the ReadMe for flutter_form_builder:
InputDecorator(
decoration: InputDecoration(
labelText: "Select option",
contentPadding: EdgeInsets.only(top: 10.0, bottom: 0.0), // Change to EdgeInsets.zero
border: InputBorder.none,
errorText: field.errorText,
),
child: Container(
height: 200,
child: CupertinoPicker(
itemExtent: 30,
children: options.map((c) => Text(c)).toList(),
onSelectedItemChanged: (index) {
field.didChange(options[index]);
},
),
),
);
You can wrap it inside ButtonTheme like:
ButtonTheme(
alignedDropdown: true,
child: FormBuilderDropdown()
)
1