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

参考。

  1. country_list_pick
  2. getworld]
  3. mask_text_input_formatter

GitHub

https://github.com/AmremadDev/country-list-picker