如何调整country_picker下拉菜单高度并添加边框？

调整下拉菜单高度（避免遮挡底部按钮） #

直接设置bottomSheetHeight为固定值易遮挡底部按钮，建议通过屏幕尺寸动态计算高度：

• 若底部有导航栏，可减去导航栏高度和底部安全区域高度：

showCountryPicker(
  context: context,
  countryListTheme: CountryListThemeData(
    // 计算高度：屏幕总高度 - 底部安全区域 - 导航栏高度
    bottomSheetHeight: MediaQuery.of(context).size.height 
        - MediaQuery.of(context).padding.bottom 
        - kBottomNavigationBarHeight,
  ),
  onSelect: (Country country) {
    print('选中的国家：${country.displayName}');
  },
);

• 也可设置为屏幕高度的固定比例（如60%），适配不同设备：

bottomSheetHeight: MediaQuery.of(context).size.height * 0.6,

给下拉菜单添加边框 #

利用CountryListThemeData的shape属性，通过RoundedRectangleBorder设置边框样式：

showCountryPicker(
  context: context,
  countryListTheme: CountryListThemeData(
    bottomSheetHeight: MediaQuery.of(context).size.height * 0.6,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16.0)),
      side: BorderSide(color: Colors.grey.shade300, width: 1.0), // 自定义边框颜色和宽度
    ),
  ),
  onSelect: (Country country) {
    print('选中的国家：${country.displayName}');
  },
);

更灵活的自定义方案（可选） #

若上述配置无法满足需求，可手动构建自定义底部弹窗，完全控制样式：

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.transparent,
  isScrollControlled: true,
  builder: (context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.6,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
        border: Border.all(color: Colors.grey.shade300, width: 1),
      ),
      child: CountryPicker(
        onSelect: (Country country) {
          Navigator.pop(context);
          print('选中的国家：${country.displayName}');
        },
      ),
    );
  },
);

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