CountryListPicker for Flutter package de sélection de pays personnalisable avec prise en charge de plusieurs langues.
Installation
Exécutez cette commande :
Avec Flutter :
$ flutter pub add country_list_picker
Cela ajoutera une ligne comme celle-ci au pubspec.yaml de votre package (et exécutera un implicite flutter pub get
):
dependencies:
country_list_picker: ^1.0.1
Alternativement, votre éditeur peut prendre en charge flutter pub get
. Consultez la documentation de votre éditeur pour en savoir plus.
Maintenant, dans votre code Dart, vous pouvez utiliser :
import 'package:country_list_picker/country_list_picker.dart'
Usage
import 'package:country_list_picker/country_list_picker.dart';
void main() {
//simple code
CountryListPicker(
onCountryChanged: ((value) {
// do something
}),
onChanged: (value) {
// do something
},
}
Commencer
Pris en charge 250 pays avec nom commun/officiel, iso_3166_1_alpha2, iso_3166_1_alpha3, dialing_code, default_number_length, default_number_format, local_number_sample.
Langues prises en charge :
- arabe
- Chinois
- croate
- tchèque
- Anglais
- estonien
- finlandais
- Français
- Allemand
- hongrois
- italien
- Japonais
- coréen
- persan
- polonais
- Portugais
- russe
- slovaque
- Espagnol
- suédois
- ourdou
Paramètres du sélecteur
Paramètre | Taper | Défaut | La description |
---|---|---|---|
onCountryChanged |
ValueChanged? |
null |
Il s’agit d’une fonction de rappel appelée lorsque le pays sélectionné est modifié, qui peut être utilisée pour accéder au pays nouvellement sélectionné. |
onChanged |
ValueChanged? |
null |
Il s’agit d’une fonction de rappel appelée lorsque le numéro de téléphone dans le champ de saisie change, qui peut être utilisée pour accéder au nouveau numéro de téléphone. |
initialCountry |
Countries |
Countries.Egypt |
Définit le pays initial qui est sélectionné lors du premier rendu du widget. |
language |
Languages |
Languages.English |
Définit la langue d’affichage du widget. |
textDirection |
TextDirection |
— | Définit la direction du texte pour le widget en fonction de la direction de la langue. |
displayName |
Names |
Names.common |
Détermine si le nom du pays affiché est commun ou officiel. |
localCountry |
Countries |
null |
Reportez-vous à l’appareil local que vous définirez. |
countryNameTextStyle |
TextStyle |
TextStyle(fontSize: 15, color: Colors.grey) |
Style de texte pour l’affichage du nom du pays. |
isShowFlag |
bool |
true |
Détermine la visibilité de l’icône du drapeau. Une valeur true affichera l’icône du drapeau, tandis qu’une valeur false la masquera. |
flagSize |
Size |
true |
taille de l’icône du drapeau. Il a une valeur par défaut Taille (40,40) |
isShowDiallingCode |
bool |
true |
Détermine si le code de numérotation doit être affiché ou non. Si vrai, le code de numérotation sera affiché. Si faux, il sera caché. |
isShowDownIcon |
bool |
true |
Détermine si l’icône du drapeau doit être affichée ou non. Si vrai, l’icône du drapeau sera affichée. Si faux, il sera masqué. |
isShowCountryName |
bool |
true |
Détermine si le nom du pays doit être affiché ou non. Si vrai, le nom du pays sera affiché. Si faux, il sera masqué. |
isShowInputField |
bool |
true |
Détermine si le champ de saisie du numéro de téléphone doit être affiché ou non. Si vrai, le champ de saisie du numéro de téléphone sera affiché. Si faux, il sera masqué. |
iconDown |
Icon |
Icon(Icons.keyboard_arrow_down, size: 24) |
Détermine si l’icône de flèche déroulante doit être affichée ou non. Si vrai, l’icône de flèche déroulante sera affichée. Si faux, il sera masqué. |
diallCodeStyle |
TextStyle |
TextStyle(fontSize: 16, fontWeight: FontWeight.bold) |
Style de texte pour l’affichage du code de numérotation. |
border |
InputBorder |
UnderlineInputBorder() |
Bordure du champ de saisie du numéro de téléphone. |
inputTheme |
InputThemeData |
Voir la section Paramètres d’entrée | Données de thème pour le champ de saisie du numéro de téléphone. |
dialogTheme |
DialogThemeData |
Voir la section Paramètres de dialogue | Données thématiques pour la boîte de dialogue de sélection de pays. |
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
)
Paramètres d’entrée
Paramètre | Taper | Défaut | La description |
---|---|---|---|
obscureText |
bool |
false |
Détermine si la saisie de texte doit être masquée ou non. |
obscuringCharacter |
String |
« * » | Le caractère utilisé pour masquer la saisie de texte. |
style |
TextStyle |
TextStyle(fontSize: 16) |
Le style de texte du champ de saisie. |
hintText |
String |
Enter your phone number |
Le texte d’astuce à afficher lorsque le champ de saisie est vide. |
hintStyle |
TextStyle |
TextStyle(fontSize: 16, color: Color(0xFF9E9E9E)) |
style de texte pour le texte d’astuce. |
border |
InputBorder |
InputBorder.none |
Le style de bordure du champ de saisie. |
mask |
String |
« ### #### ### » | Le masque utilisé pour formater la saisie de texte. |
vous pouvez définir mask et hintString sur la valeur par défaut de chaque pays à l’aide de 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,
),
)
Paramètres de dialogue
Paramètre | Taper | Défaut | La description |
---|---|---|---|
isShowFlag |
bool |
Détermine si l’icône du drapeau doit être affichée. Une valeur true affichera l’icône du drapeau, tandis qu’une valeur false la masquera. | |
isShowDiallCode |
bool |
Détermine si le code de numérotation doit être affiché. Une valeur true affichera le code de numérotation, tandis qu’une valeur false le masquera. | |
isShowFloatButton |
bool |
Détermine si le bouton flottant doit être affiché. Une valeur true affichera le bouton flottant, tandis qu’une valeur false le masquera. | |
isShowSearchTile |
bool |
Détermine si la vignette de recherche doit être affichée. Une valeur true affichera la vignette de recherche, tandis qu’une valeur false la masquera. | |
isShowLastPickTile |
bool |
Détermine si la dernière vignette choisie doit être affichée. Une valeur true affichera la dernière tuile choisie, tandis qu’une valeur false la masquera. | |
isShowAlphabetsBar |
bool |
Détermine si la barre alphabétique doit être affichée. Une valeur true affichera la barre des lettres, tandis qu’une valeur false la masquera. | |
backgroundColor |
Color |
couleur d’arrière-plan de la boîte de dialogue. | |
textStyle |
TextStyle |
style de texte pour le texte affiché dans la boîte de dialogue. La valeur par défaut est TextStyle(fontSize: 16) . |
|
appBar |
PreferredSizeWidget |
Boîte de dialogue Appbar à afficher en haut de l’écran. | |
tileHeight |
double |
hauteur des tuiles. La valeur par défaut est 50 |
|
alphabetsBarTheme |
AlphabetsBarThemeData |
données de thème pour la barre des alphabets. | |
tilesTheme |
TilesThemeData |
données de thème pour les tuiles. |
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
)
Paramètres alphabétiques
Paramètre | Taper | Défaut | La description |
---|---|---|---|
backgroundColor |
Color |
Colors.transparent |
La couleur d’arrière-plan de l’élément alphabétique non sélectionné |
style |
TextStyle |
TextStyle(fontSize: 12) |
Le style de texte du texte de l’élément alphabétique. |
selectedBackgroundColor |
Color |
Colors.transparent |
La couleur d’arrière-plan de l’élément de l’alphabet. |
selectedStyle |
TextStyle |
TextStyl(fontSize: 18, fontWeight: FontWeight.bold) |
Le style de texte du texte de l’élément alphabétique sélectionné. |
Notez que : le sélecteur de liste de pays ne prend pas en charge la barre alphabétique avec les langues chinoise, japonaise et coréenne.
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
),
)
Paramètres des mosaïques de dialogue
Paramètre | Taper | Défaut | La description |
---|---|---|---|
backgroundColor |
Color |
Theme.of(context).colorScheme.surface |
La couleur de fond de la tuile. |
style |
TextStyle |
TextStyle(fontSize: 16, fontWeight: FontWeight.bold) |
Le style de texte du texte du titre. |
currentLocationTileTitle |
String |
« Localisation actuelle » | Le titre de la tuile pour l’emplacement actuel. |
lastPickIcon |
Icon |
Icon(Icons.check) |
L’icône de la dernière tuile choisie. |
lastPickTitle |
String |
« Dernier choix » | Le titre de la dernière tuile choisie. |
searchHint |
String |
« nom/indicatif… » | Texte d’astuce pour la barre de recherche. |
searchHintStyle |
TextStyle |
TextStyle(fontSize: 16, color: Color(0xFF9E9E9E) |
Style de texte du texte de l’indicateur de recherche. |
searchTitle |
String |
« Rechercher » | Le titre de la barre de recherche. |
si vous devez afficher CurrentLocationTile, vous devez définir la valeur localCountry sur le pays de votre choix.
Fonctionnalités et bogues
Veuillez soumettre les demandes de fonctionnalités et les bogues à l’adresse [issue tracker][tracker].
Traqueur d’incidents