一个Flutter包,提供了一个简单且可自定义的国家电话代码选择器小部件!
| 选择器小部件 | 搜索栏 |
|---|---|
![]() |
![]() |
功能
此包提供了许多自定义选项,让您可以轻松地根据您的偏好构建小部件!
| 所有可设置的参数 | 含义 | 默认值 |
|---|---|---|
| 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!

