Flutter CountryCodePicker如何移除关闭图标并实现点击弹窗外部关闭

两个交互需求均可通过组件内置配置参数直接实现，无需修改插件源码：

• 移除弹窗自带关闭图标：设置showCloseIcon: false即可隐藏弹窗右上角默认的关闭控件。若当前使用的插件版本无该参数，可通过自定义appBar属性传入无关闭按钮的AppBar实现同等效果。
• 点击弹窗外部关闭：设置barrierDismissible: true即可开启点击遮罩层关闭弹窗的交互，该属性为Flutter弹窗的通用配置，开启后用户点击弹窗以外的遮罩区域会自动关闭选择弹窗。

修改后完整示例代码 #

CountryCodePicker(
  // 隐藏弹窗默认关闭图标
  showCloseIcon: false,
  // 开启点击外部区域关闭弹窗
  barrierDismissible: true,
  dialogTextStyle: const TextStyle(color: Colors.black54,fontWeight: FontWeight.w100),
  showOnlyCountryWhenClosed: false,
  dialogSize: Size(
      ScreenUtil().setWidth(220), ScreenUtil().setHeight(400)),
  onChanged: (code) {
    print(code);
  },
  boxDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    boxShadow:  [
      BoxShadow(
        color: Colors.black54,
        offset: const Offset(0.5, 0.5),
        blurRadius: 50.0.sp,
        spreadRadius: 17.0.sp,
      ),
      const BoxShadow(
        color: Colors.white,
        offset: Offset(0.0, 0.0),
        blurRadius: 0.0,
        spreadRadius: 0.0,
      ),
    ],
  ),
  textStyle: TextStyle(fontSize: 13.0.sp, color: Colors.black54),
  initialSelection: 'IN',
  favorite: const ['+91', 'IN'],
  alignLeft: true,
  onInit: (code) => print("on init ${code?.name} ${code?.dialCode} ${code?.name}"),
)

低版本适配方案 #

如果使用的是低于2.0版本的country_code_picker，找不到showCloseIcon参数，可通过自定义弹窗AppBar的方式隐藏关闭按钮，添加如下配置即可：

appBar: AppBar(
  automaticallyImplyLeading: false,
  title: const Text("选择国家/地区代码"),
)

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