Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – I want the DropDownButtonFormField to having padding/margin around it's DropDownMenuItems

I am using DropDownButtonFormField in my code. I want to add margin around it’s items but am not able to do so. Here is my code:

DropdownButtonFormField<String>(
                    validator: (value) {
                      if (value == null) {
                        return AppStrings.pleaseSelectYourGender;
                      }
                      return null;
                    },
                    borderRadius: BorderRadius.circular(10),
                    icon: const Icon(Icons.expand_more),
                    // value: _selectedGender,

                    items: [
                      AppStrings.male,
                      AppStrings.female,
                      AppStrings.other
                    ].map((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: SubText1(text: value, color:  AppColors.textColor,),
                      );
                    }).toList(),
                    onChanged: (newValue) {
                      setState(() {
                        _selectedGender = newValue!;
                      });
                    },
                    decoration:  InputDecoration(
                      labelText: AppStrings.selectGender,
                      labelStyle: AppStrings.labelStyle,
                      filled: true,
                      fillColor: AppColors.fieldColor.withOpacity(0.5),
                      //border: OutlineInputBorder(),
                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                      ),
                      enabledBorder: const  OutlineInputBorder(
                        borderSide: BorderSide.none,
                      ),
                      focusedBorder: const  OutlineInputBorder(
                        borderSide: BorderSide.none,
                      ),
                      // errorBorder: OutlineInputBorder(
                      //   borderSide: BorderSide.none,
                      // ),
                      disabledBorder:  const OutlineInputBorder(
                        borderSide: BorderSide.none,
                      ),
                    ),
                  ),

The result I want is:
Desired result
My layout is:
output achieved so far

I want the DropDownMenuItems to be aligned with the textfields above.

Tags:

2

Answers


  1. 0

    Use Padding

    Padding(
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: DropdownButtonFormField<String>(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.grey.withOpacity(0.5),
                      ),
                      borderRadius: AppSizes.of(context)!.sizes.defaultButtonBorderRadius,
                    ),
                  ),
                  value: state.group.value.getOrElse(() => _iconName),
                  onChanged: (String? value) {
                    setState(() {
                      _iconName = value ?? '';
                    });
                    if (value != 'navigation_empty_icon'){
                      // print('strSelectedShipment-$strSelectedShipment');
                    }
                    notifier.groupChanged(value ?? '');
                  },
                  items: arrGroup,
                ),
              ),
    Login or Signup to reply.
  2. 0

    1-DropdownButtonFormField has a property called: contentPadding and it is inside of InputDecoration property, you can use it like this :

    DropdownButtonFormField(
    decoration: InputDecoration(
    contentPadding:const EdgeInsets.symmetric(horizontal: 10, vertical: 12),));

    2-for the child item (DropdownMenuItem) you can add padding for each widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search