一个Flutter包,提供了一个简单且可自定义的国家电话代码选择器小部件!

选择器小部件 搜索栏
Screenshot_1651772527 Screenshot_1651772534

功能

此包提供了许多自定义选项,让您可以轻松地根据您的偏好构建小部件!

所有可设置的参数 含义 默认值
defaultCountryCode 允许您设置默认/初始选定的国家 阿富汗
高度 选择器小部件的高度 45
width 选择器小部件的宽度 80
flagHeight 选择器小部件内国旗的高度 35
flagWidth 选择器小部件内国旗的宽度 50
backgroundColor 选择器小部件的背景颜色 Colors.transparent
borderRadius 控制选择器小部件边框圆角的曲率 15
borderColor 选择器小部件边框的颜色 Colors.transparent
borderWidth 选择器小部件边框的宽度 0
contentPadding 选择器小部件内的填充 EdgeInsets.symmetric(horizontal:5, vertical:5)
countryNameTextStyle 为选择器小部件内的国家名称字体设置样式 TextStyle(fontSize: 14, color: Colors.black)
countryPhoneCodeTextStyle 为选择器小部件内的电话号码字体设置样式 TextStyle(color: Colors.black, fontSize: 14)
showFlag 如果值为true,则在选择器小部件中显示国旗
showName 如果值为true,则在选择器小部件中显示名称
showPhoneCode 如果值为true,则在选择器小部件中显示电话号码代码
actionIcon 选择器小部件图标 Icon(Icons.arrow_drop_down_rounded)
searchSheetBackground 搜索栏界面的背景颜色 Color(0xfffafafa)
searchBarLeadingIcon 返回按钮图标 Icon(Icons.arrow_back_outlined, color: Colors.black)
searchBarHintText 文本字段的提示文本
searchBarHintStyle 设置提示文本的样式 TextStyle()
searchBarLabelText 文本字段的标签文本
searchBarLabelStyle 设置标签文本的样式 TextStyle()
searchBarHelperText 文本字段的帮助文本
searchBarHelperStyle 设置帮助文本的样式 TextStyle()
searchBarPrefixText 文本字段的前缀文本
searchBarPrefixStyle 设置前缀文本的样式 TextStyle()
searchBarPrefixIcon 文本字段的前缀图标 Icon(Icons.search, color: Colors.black)
searchBarContentPadding 文本字段内容的内边距 EdgeInsets.symmetric(horizontal: 10, vertical: 5)
border 文本框边框 OutlineInputBorder(borderSide: BorderSide.none)
errorBorder 文本框的错误边框 OutlineInputBorder(borderSide: BorderSide.none)
focusedBorder 文本框的焦点边框 OutlineInputBorder(borderSide: BorderSide.none)
disabledBorder 文本框的禁用边框 OutlineInputBorder(borderSide: BorderSide.none)
focusedErrorBorder 文本框的焦点错误边框 OutlineInputBorder(borderSide: BorderSide.none)
enabledBorder 文本框的启用边框 OutlineInputBorder(borderSide: BorderSide.none)
searchBarCursorColor 文本框光标的颜色 Colors.black
searchBarCursorHeight 文本框光标的高度 20
searchBarCursorWidth 文本框光标的宽度 2
style 设置文本框内输入的样式 TextStyle()
searchBarInitialValue 文本字段的初始查询 空字符串
keyboardType 文本字段的输入类型 TextInputType.text
showCursor 如果值为true,则光标可见

入门

只需将其包含在您的pubspec.yaml文件中

  country_phone_code_picker: any

或者在您的终端中运行此命令

  flutter pub add country_phone_code_picker

用法

要简单地获取一个国家选择器小部件,请尝试

CountryPhoneCodePicker.withDefaultSelectedCountry(
  defaultCountryCode:
  Country(name: 'India', countryCode: 'IN', phoneCode: '+91'),
  borderRadius: 5,
  borderWidth: 1,
  borderColor: Colors.grey,
  style: const TextStyle(fontSize: 16),
  searchBarHintText: 'Search by name',
),

要获取选定国家/地区的详细信息,请尝试

CountryController countryController = CountryController(); //Initialize the controller
print(countryController.selectedCountry);
print(countryController.selectedCountryCode)

附加信息

访问:samitkapoor/country_phone_code_picker 以查找更多信息,贡献代码,提交关于该包的issue!

GitHub

查看 Github