如何自定义Flutter的country_code_picker样式并调整其宽高？

我想要实现特定样式的CountryCodePicker组件，但无法调整它的宽高。当前使用的代码如下：

InputDecorator(
              decoration: InputDecoration(
                labelText: 'Nationality',
                labelStyle:
                    const TextStyle(color: AppColors.fIconsAndTextColor),
                enabledBorder: OutlineInputBorder(
                  borderSide:
                      const BorderSide(color: AppColors.fIconsAndTextColor),
                  borderRadius: BorderRadius.circular(20.0),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              child: CountryCodePicker(
                initialSelection: 'AE',
                showCountryOnly: true,
                textOverflow: TextOverflow.visible,
                showOnlyCountryWhenClosed: true,
                showDropDownButton: true,
              ),
            ),

请问如何修改才能达到预期的样式？

要调整CountryCodePicker的宽高并匹配预期样式，可以通过以下两种方式修改：

方式一：用Container强制约束尺寸 #

直接用Container包裹CountryCodePicker，通过width和height属性强制控制组件尺寸，同时调整内部对齐和样式适配容器：

InputDecorator(
  decoration: InputDecoration(
    labelText: 'Nationality',
    labelStyle: const TextStyle(color: AppColors.fIconsAndTextColor),
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: AppColors.fIconsAndTextColor),
      borderRadius: BorderRadius.circular(20.0),
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(20.0),
    ),
  ),
  child: Container(
    width: 130, // 根据预期样式设置宽度
    height: 40, // 根据预期样式设置高度
    alignment: Alignment.centerLeft,
    child: CountryCodePicker(
      initialSelection: 'AE',
      showCountryOnly: true,
      showOnlyCountryWhenClosed: true,
      showDropDownButton: true,
      textStyle: const TextStyle(fontSize: 14), // 调整文本大小适配容器
      padding: EdgeInsets.zero, // 去除默认内边距避免内容溢出
    ),
  ),
),

方式二：自定义Builder完全控制UI #

如果需要更精细的样式控制，可以使用builder参数完全自定义组件的布局结构，彻底摆脱默认样式限制：

InputDecorator(
  decoration: InputDecoration(
    labelText: 'Nationality',
    labelStyle: const TextStyle(color: AppColors.fIconsAndTextColor),
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: AppColors.fIconsAndTextColor),
      borderRadius: BorderRadius.circular(20.0),
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(20.0),
    ),
  ),
  child: CountryCodePicker(
    initialSelection: 'AE',
    showCountryOnly: true,
    showOnlyCountryWhenClosed: true,
    builder: (CountryCode? countryCode) {
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            countryCode?.name ?? '',
            style: const TextStyle(fontSize: 14, color: AppColors.fIconsAndTextColor),
          ),
          const SizedBox(width: 6),
          Icon(Icons.arrow_drop_down, size: 20, color: AppColors.fIconsAndTextColor),
        ],
      );
    },
  ),
),

这种方式可以完全掌控文本大小、图标样式、元素间距，完美匹配预期设计。

内容的提问来源于stack exchange，提问作者user18710300