Flutter中DropdownButton2下拉框滚动条添加上右内边距的方法

我正在使用DropdownButton2包开发Flutter下拉框组件，希望为下拉框内的滚动条添加上方和右侧内边距，但始终未找到可行方案。

当前滚动条效果：

期望实现的效果：

滚动条需与下拉框顶部、右侧保持间距。以下是我的实现代码：

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sizer/sizer.dart';

class LocationDropdown extends StatefulWidget {
  final List cities;
  final String? selectedCity;
  final Color? locationIconColor;
  final Color? iconColor;
  final Color? textColor;
  final Function(String?) onLocationChange;
  final double? width;
  final Offset? offset;

  const LocationDropdown({
    Key? key,
    required this.cities,
    required this.selectedCity,
    this.locationIconColor,
    this.iconColor,
    this.textColor,
    this.width,
    this.offset,
    required this.onLocationChange,
  }) : super(key: key);

  @override
  State<LocationDropdown> createState() => _LocationDropdownState();
}

class _LocationDropdownState extends State<LocationDropdown> {
  bool isDropDownButtonClicked = false;

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<String>(
        onMenuStateChange: (value) {
          setState(() {
            isDropDownButtonClicked = value;
          });
        },
        isExpanded: true,
        hint: Row(
          children: [
            SvgPicture.asset(
              Constants.marker,
              height: 16,
              color: widget.locationIconColor,
            ),
            const SizedBox(
              width: 5,
            ),
            SizedBox(
              width: widget.width == null ? null : (widget.width! - 40),
              child: Text(
                "${widget.selectedCity}",
                style: TextStyle(
                  fontSize: 14,
                  color: widget.textColor ?? Colors.white,
                ),
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
            ),
            const Spacer(),
            RotatedBox(
              quarterTurns: isDropDownButtonClicked ? 2 : 0,
              child: SvgPicture.asset(
                Constants.downward_white_icon,
                width: 15,
                color: widget.iconColor,
              ),
            ),
          ],
        ),
        items: widget.cities
            .map((item) => DropdownMenuItem<String>(
                  value: item,
                  child: Text(
                    "$item",
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: "Mumbai" == item
                            ? FontWeight.w500
                            : FontWeight.w300,
                        color: widget.selectedCity == item
                            ? ColorCode.secondaryColor
                            : ColorCode.placeholderDefault),
                    overflow: TextOverflow.ellipsis,
                  ),
                ))
            .toList(),
        onChanged: widget.onLocationChange,
        icon: const SizedBox.shrink(),
        buttonElevation: 2,
        itemHeight: 35,
        itemPadding: const EdgeInsets.only(left: 14, right: 14),
        dropdownMaxHeight: 140,
        dropdownWidth: 150,
        dropdownPadding: null,
        dropdownDecoration: BoxDecoration(
          borderRadius: BorderRadius.circular(14),
          color: Theme.of(context).colorScheme.primaryContainer,
        ),
        scrollbarRadius: const Radius.circular(40),
        scrollbarThickness: 2.w,
        scrollbarAlwaysShow: true,
        offset: widget.offset ?? const Offset(0, 0),
      ),
    );
  }
}

我已尝试查找其他包，但仍未找到解决方法，请问如何在DropdownButton2中实现滚动条的内边距设置？

DropdownButton2本身没有直接提供滚动条内边距的配置参数，可通过以下两种方式实现需求：

方法1：自定义下拉菜单的Scrollbar #

利用dropdownBuilder完全自定义下拉内容，手动包裹Scrollbar并设置padding，精准控制滚动条位置：

DropdownButton2<String>(
  // 保留原有其他配置...
  dropdownBuilder: (context, selectedItem, items) {
    return Container(
      // 为滚动条添加上方、右侧、底部间距，数值可按需调整
      padding: const EdgeInsets.only(top: 8, right: 8, bottom: 8),
      child: Scrollbar(
        radius: const Radius.circular(40),
        thickness: 2.w,
        thumbVisibility: true,
        child: ListView.builder(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return items[index];
          },
        ),
      ),
    );
  },
  // 其他原有配置不变...
)

这种方式既保留DropdownButton2的核心交互逻辑，又能完全掌控滚动条的布局。

方法2：调整下拉框内边距配合滚动条偏移 #

通过dropdownPadding给下拉框整体添加上方和右侧内边距，间接实现滚动条的间距效果：

DropdownButton2<String>(
  // 原有配置...
  dropdownPadding: const EdgeInsets.only(top: 8, right: 8, bottom: 8, left: 0),
  // 其他配置不变...
)

这种方法操作简单，但精准度稍差，可能需要微调padding数值来匹配期望效果。

注意事项 #

• 使用方法1时，需确保dropdownMaxHeight与自定义ListView的布局兼容，避免出现滚动冲突。
• 若使用Sizer包的2.w作为滚动条厚度，自定义Scrollbar时保持单位一致即可。

内容的提问来源于stack exchange，提问作者Nithyashree B L