使用country_picker插件时国旗显示暗淡，如何让国旗更鲜艳？

你可以通过以下两种方案调整配置，让国旗显示更鲜艳：

方案一：清除默认颜色滤镜 #

插件默认可能给国旗图片添加了低饱和度的颜色滤镜，直接在CountryListThemeData中设置空的flagDecoration即可移除该滤镜：

showCountryPicker(
  countryListTheme: CountryListThemeData(
    bottomSheetHeight: MediaQuery.of(context).size.height * 0.85,
    flagSize: isMobile ? 25 : 40,
    backgroundColor: Colors.white,
    // 清除默认颜色滤镜
    flagDecoration: const BoxDecoration(),
  ),
  context: context,
  showPhoneCode: true,
  onSelect: (country) {},
);

方案二：提升图片渲染质量 #

如果方案一无效，可通过自定义flagImageProvider，设置高质量的图片渲染参数：

showCountryPicker(
  countryListTheme: CountryListThemeData(
    bottomSheetHeight: MediaQuery.of(context).size.height * 0.85,
    flagSize: isMobile ? 25 : 40,
    backgroundColor: Colors.white,
    // 自定义图片加载器，启用高质量渲染
    flagImageProvider: (countryCode) => AssetImage(
      'packages/country_picker/assets/flags/${countryCode.toLowerCase()}.png',
      package: 'country_picker',
      filterQuality: FilterQuality.high,
    ),
  ),
  context: context,
  showPhoneCode: true,
  onSelect: (country) {},
);

额外建议 #

若上述方法都未生效，建议将插件升级到最新版本——旧版本可能存在内置国旗图片本身饱和度偏低的问题，升级后可直接解决。

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