我希望 DropDownButtonFormField 在其 DropDownMenuItems 周围有填充/边距

Question

我在代码中使用 DropDownButtonFormField 。我想在其项目周围添加边距，但无法这样做。这是我的代码：

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

我想要的结果是： 我的布局是：

我希望 DropDownMenuItems 与上面的文本字段对齐。

Answer 1

使用填充

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