CountryListPicker for Flutter 是一个可定制的国家选择包,支持多语言。
安装
运行此命令
使用 Flutter
$ flutter pub add country_list_picker
这将在您的软件包的 pubspec.yaml 文件中添加类似此行(并运行隐式 flutter pub get)
dependencies:
country_list_picker: ^1.0.1
或者,您的编辑器可能支持 flutter pub get。请查看您编辑器的文档以了解更多信息。
现在,在您的 Dart 代码中,您可以使用
import 'package:country_list_picker/country_list_picker.dart'
用法
import 'package:country_list_picker/country_list_picker.dart';
void main() {
//simple code
CountryListPicker(
onCountryChanged: ((value) {
// do something
}),
onChanged: (value) {
// do something
},
}
入门
支持 250 个国家,包含常用/官方名称、iso_3166_1_alpha2、iso_3166_1_alpha3、拨号代码、默认号码长度、默认号码格式、本地号码示例。
支持的语言
- 阿拉伯语
- 中文
- 克罗地亚语
- 捷克语
- 英语
- 爱沙尼亚语
- 芬兰语
- 法语
- 德语
- 匈牙利语
- 意大利语
- 日语
- 韩语
- 波斯语
- 波兰语
- 葡萄牙语
- 俄语
- 斯洛伐克语
- 西班牙语
- 瑞典语
- 乌尔都语
选择器参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
onCountryChanged |
ValueChanged? |
空 |
这是一个回调函数,在选定国家发生变化时调用,可用于访问新选定的国家。 |
onChanged |
ValueChanged? |
空 |
这是一个回调函数,在输入字段中的电话号码发生变化时调用,可用于访问新的电话号码。 |
initialCountry |
国家 |
国家.埃及 |
设置小部件首次渲染时选定的初始国家。 |
language |
语言 |
语言.英语 |
设置小部件的显示语言。 |
textDirection |
文本方向 |
-- | 根据语言方向设置小部件的文本方向。 |
displayName |
名称 |
名称.common |
确定显示的是国家名称的常用名还是官方名。 |
localCountry |
国家 |
空 |
引用本地设备,将由您定义。 |
countryNameTextStyle |
TextStyle |
TextStyle(fontSize: 15, color: Colors.grey) |
国家名称显示的文本样式。 |
isShowFlag |
布尔值 |
真 |
确定国旗图标的可见性。true 会显示国旗图标,false 会隐藏它。 |
flagSize |
Size |
真 |
国旗图标的大小。默认值为 Size (40,40) |
isShowDiallingCode |
布尔值 |
真 |
确定是否显示拨号代码。如果为 true,则显示拨号代码。如果为 false,则隐藏它。 |
isShowDownIcon |
布尔值 |
真 |
确定是否显示国旗图标。如果为 true,则显示国旗图标。如果为 false,则隐藏它。 |
isShowCountryName |
布尔值 |
真 |
确定是否显示国家名称。如果为 true,则显示国家名称。如果为 false,则隐藏它。 |
isShowInputField |
布尔值 |
真 |
确定是否显示电话号码输入字段。如果为 true,则显示电话号码输入字段。如果为 false,则隐藏它。 |
iconDown |
Icon |
Icon(Icons.keyboard_arrow_down, size: 24) |
确定是否显示下拉箭头图标。如果为 true,则显示下拉箭头图标。如果为 false,则隐藏它。 |
diallCodeStyle |
TextStyle |
TextStyle(fontSize: 16, fontWeight: FontWeight.bold) |
拨号代码显示的文本样式。 |
border |
InputBorder |
UnderlineInputBorder() |
电话号码输入字段的边框。 |
inputTheme |
InputThemeData |
请参阅输入参数部分 | 电话号码输入字段的主题数据。 |
dialogTheme |
DialogThemeData |
请参阅对话框参数部分 | 国家选择对话框的主题数据。 |
CountryListPicker(
onCountryChanged: ((value) {
// do something
}),
onChanged: (value) {
// do something
},
initialCountry: Countries.Egypt,
language: Languages.Arabic,
isShowDownIcon: picker.isDownIcon,
isShowCountryTitle: false, // if you need to hide country title
displayName: Names.offical, // if you need to display country offical name
)
输入参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
obscureText |
布尔值 |
假 |
确定文本输入是否应被隐藏。 |
obscuringCharacter |
字符串 |
"*" | 用于隐藏文本输入的字符。 |
style |
TextStyle |
TextStyle(fontSize: 16) |
输入字段的文本样式。 |
hintText |
字符串 |
输入您的电话号码 |
当输入字段为空时显示的提示文本。 |
hintStyle |
TextStyle |
TextStyle(fontSize: 16, color: Color(0xFF9E9E9E)) |
提示文本的文本样式。 |
border |
InputBorder |
InputBorder.none |
输入字段的边框样式。 |
mask |
字符串 |
"### #### ###" | 用于格式化文本输入的掩码。 |
您可以使用 onCountryChanged 设置每个国家/地区的掩码和提示字符串的默认值。
String _hintString ="";
String _mask ="";
CountryListPicker(
onCountryChanged: ((value) {
_hintString = value.local_number_sample;
_mask = value.default_number_format;lue
// do something
}),
onChanged: (value) {
// do something
},
inputTheme: InputThemeData(
hintText: _hintString
hintStyle: input.hintTextStyle,
border: InputBorder.UnderlineInputBorder
mask: _mask,
),
)
对话框参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
isShowFlag |
布尔值 |
确定是否显示国旗图标。true 会显示国旗图标,false 会隐藏它。 | |
isShowDiallCode |
布尔值 |
确定是否显示拨号代码。true 会显示拨号代码,false 会隐藏它。 | |
isShowFloatButton |
布尔值 |
确定是否显示浮动按钮。true 会显示浮动按钮,false 会隐藏它。 | |
isShowSearchTile |
布尔值 |
确定是否显示搜索栏。true 会显示搜索栏,false 会隐藏它。 | |
isShowLastPickTile |
布尔值 |
确定是否显示最近选择的条目。true 会显示最近选择的条目,false 会隐藏它。 | |
isShowAlphabetsBar |
布尔值 |
确定是否显示字母栏。true 会显示字母栏,false 会隐藏它。 | |
backgroundColor |
颜色 |
对话框的背景颜色。 | |
文本样式 |
TextStyle |
对话框中显示的文本样式。默认值为 TextStyle(fontSize: 16)。 |
|
appBar |
PreferredSizeWidget |
显示在屏幕顶部的对话框应用栏。 | |
tileHeight |
双精度 |
条目项的高度。默认值为 50 |
|
alphabetsBarTheme |
AlphabetsBarThemeData |
字母栏的主题数据。 | |
tilesTheme |
TilesThemeData |
条目项的主题数据。 |
CountryListPicker(
onCountryChanged: ((value) {
// do something
}),
onChanged: (value) {
// do something
},
dialogTheme: DialogThemeData(
isShowFlag: false, // <- hide dialog flags
isShowDialCode: false, // <- hide dial code
isShowFloatButton: false, // <- hide float button
isShowSearchTile: false, // <- hide search tile
isShowLastPickTile: false, // <- hide last pick tile
isShowAlphabetsBar: false, // <- hide alphabets bar
)
字母参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
backgroundColor |
颜色 |
Colors.transparent |
未选择的字母项的背景颜色 |
style |
TextStyle |
TextStyle(fontSize: 12) |
字母项文本的文本样式。 |
selectedBackgroundColor |
颜色 |
Colors.transparent |
字母项的背景颜色。 |
selectedStyle |
TextStyle |
TextStyl(fontSize: 18, fontWeight: FontWeight.bold) |
选定字母项文本的文本样式。 |
请注意:Country List Picker 不支持中文、日文和韩文的字母栏。
CountryListPicker(
onCountryChanged: ((value) {
// do something
}),
onChanged: (value) {
// do something
},
dialogTheme: DialogThemeData(
alphabetsBarTheme: AlphabetsBarThemeData(
backgroundColor: Colors.transparent,
selectedBackgroundColor: Colors.green, //<- change background of selected item
// style: , // to change unselected alphabet items text style
// selectedStyle: , // to change selected alphabet items text style
),
)
对话框条目参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
backgroundColor |
颜色 |
Theme.of(context).colorScheme.surface |
条目项的背景颜色。 |
style |
TextStyle |
TextStyle(fontSize: 16, fontWeight: FontWeight.bold) |
标题文本的文本样式。 |
currentLocationTileTitle |
字符串 |
"当前位置" | 当前位置条目的标题。 |
lastPickIcon |
Icon |
Icon(Icons.check) |
最近选择条目的图标。 |
lastPickTitle |
字符串 |
"最近选择" | 最近选择条目的标题。 |
searchHint |
字符串 |
"名称/拨号代码..." | 搜索栏的提示文本。 |
searchHintStyle |
TextStyle |
TextStyle(fontSize: 16, color: Color(0xFF9E9E9E) |
搜索提示文本的文本样式。 |
searchTitle |
字符串 |
"搜索" | 搜索栏的标题。 |
如果您需要显示 CurrentLocationTile,则必须将 localCountry 值设置为您想要的国家。
功能和 Bug
请在 [issue tracker][tracker] 提交功能请求和 Bug。
issue tracker