如何修改intl_phone_field 3.1.0中国家代码的字体样式?
问题原因
intl_phone_field 3.1.0 版本对不同区域的文本样式做了拆分控制:
- 你当前配置的
style属性仅生效于用户输入的手机号数字区域 - 输入框前置的国家代码文本有独立的样式配置字段,不会继承
style的配置,所以会出现只有数字字体变更、国家代码样式不生效的问题。
解决方法
给IntlPhoneField组件补充countryCodeStyle参数,将你需要的字体样式配置到该参数上即可,和style保持一致就能实现国家代码、手机号数字的样式统一。
如果你后续要开启国家选择下拉功能,下拉列表里的国家文本样式可以通过dropdownTextStyle参数单独配置。
修改后的完整代码参考:
Container( padding: EdgeInsets.all(20), child: Column( children: <Widget>[ Container( child: IntlPhoneField( showCountryFlag: false, showDropdownIcon: false, keyboardType: TextInputType.number, // 手机号输入区域样式 style: TextStyle( color: Colors.grey, fontFamily: 'DMSans', fontSize: 20, fontWeight: FontWeight.bold), // 新增:国家代码区域样式,和输入区样式保持一致即可 countryCodeStyle: TextStyle( color: Colors.grey, fontFamily: 'DMSans', fontSize: 20, fontWeight: FontWeight.bold), decoration: InputDecoration( counterText: '', border: InputBorder.none), initialCountryCode: 'IN', onChanged: (phone) { print(phone.completeNumber); print(phone.countryCode); print(phone.number); }, ), ), ], ), )
内容的提问来源于stack exchange,提问作者Neel Moradiya
相关产品推荐
相关产品推荐

