calendar_date_picker2
v1.1.8
Un sélecteur de calendrier léger et personnalisable basé sur Flutter CalendardAtpicker, avec prise en charge du sélecteur de dates, de sélecteur de gamme et multi-sélecteur.
 |  |  |  |
|---|---|---|---|
| mode unique | mode multiple | Mode de plage | fonction de dialogue |
| parchemin unique | multipolant | gamme de parasites | Scroll de dialogue |
CalendardatePicker2 se compose de deux widgets principaux:
CalendarDatePicker2 , ce widget comprend uniquement l'interface utilisateur du calendrier et émettra l'événement chaque fois que l'utilisateur exploite une date différente.CalendarDatePicker2WithActionButtons , ce widget comprend l'interface utilisateur du calendrier et les boutons d'action (Annuler & OK). Ce widget n'émettra la valeur mise à jour que lorsque l'utilisateur tapera le bouton «OK». null InitialDateshowCalendarDatePicker2Dialog intégré La version 1.xx permettra par défaut le sélecteur de mois. Si vous souhaitez migrer vers v1.xx à partir de v0.xx et que vous souhaitez conserver l'ancien comportement, vous devrez définir disableMonthPicker sur true .
Assurez-vous de consulter des exemples pour plus de détails.
Ajoutez la ligne suivante à pubspec.yaml :
dependencies :
calendar_date_picker2 : ^1.1.8L'exemple complet est disponible ici.
CalendardatePicker2 vous oblige à fournir config et value :
config contient les configurations de votre configuration de calendrier et de votre interface utilisateur.value est des valeurs initiales transmises dans votre sélecteur de calendrier, value doit être une List . CalendarDatePicker2 (
config : CalendarDatePicker2Config (),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Au cours de l'initialisation de CalendarDatePicker2Config , le calendarType de l'instance de configuration sera par défaut défini sur CalendarDatePicker2Type.single , vous n'avez donc pas à définir le type de calendrier spécifiquement.
Afin d'utiliser le sélecteur de date de mode multi-mode, vous devrez définir le Calendartype de Config sur CalendarDatePicker2Type.multi :
CalendarDatePicker2 (
config : CalendarDatePicker2Config (
calendarType : CalendarDatePicker2Type .multi,
),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Afin d'utiliser le sélecteur de dattes de mode de plage, vous devrez définir le Calendartype de config sur CalendarDatePicker2Type.range :
CalendarDatePicker2 (
config : CalendarDatePicker2Config (
calendarType : CalendarDatePicker2Type .range,
),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Ce package comprend la prise en charge intégrée pour afficher le calendrier comme boîte de dialogue. Pour l'utiliser, vous devrez appeler showCalendarDatePicker2Dialog , qui prend trois arguments requis: context , config , dialogSize :
...
var results = await showCalendarDatePicker2Dialog (
context : context,
config : CalendarDatePicker2WithActionButtonsConfig (),
dialogSize : const Size ( 325 , 400 ),
value : _dates,
borderRadius : BorderRadius . circular ( 15 ),
);
...| Argument | Taper | Description |
|---|---|---|
| configurer | CalendardatePicker2Config | Configurations liées à l'interface utilisateur du calendrier |
| valeur | Liste <DateTime?> | La [datetime] sélectionnée que le sélecteur doit afficher. |
| onvaluechanged | ValueChanged <list <DateTime >>? | Appelé lorsque les dates sélectionnées ont changé |
| Afficher la mois | DateTime? | Date de contrôle Calendrier affiché Mois |
| ondisplayedmonthchanged | ValueChanged <DateTime>? | Appelé lorsque l'utilisateur se rend à un nouveau mois / année dans le cueilleur en mode non-défilement |
| Option | Taper | Description |
|---|---|---|
| calendrier | CalendardatePicker2Type? | Type de calendrier, a 3 valeurs: simple, multi-plage |
| rangebidirectionnel | bool? | Indicateur pour permettre de sélectionner la plage de dates également dans l'ordre inverse-chronologique |
| préalable | DateTime? | Le premier utilisateur de DateTime autorisé peut sélectionner |
| dernière date | DateTime? | Le dernier utilisateur de DateTime autorisé peut sélectionner |
| actuel | DateTime? | Le DateTime représentant aujourd'hui qui sera décrit dans le calendrier |
| CalendarViewMode | CalendardatePicker2Mode? | La vue initialement affichée du calendrier de calendrier, avec quatre options disponibles: jour, mois, année et parchemin |
| calendarviewscrollphysics | Scrollphysics? | La physique de défilement pour la vue du mois civil |
| dynamiccalendarrows | bool? | Flag pour activer les rangées de calendrier dynamiques en fonction d'un mois spécifique |
| PermetaMameValuesElelection | bool? | Flag pour contrôler le comportement [onvaluechanged] |
| AnimateTodisplayedmonthdate | bool? | Drapeau pour toujours animer à la moisonnée affichée |
| Sémantique Dictionnaire | Carte? | Dictionnaire personnalisé pour les étiquettes de sémantique |
| désactiver | bool? | Indicateur pour désactiver les vibrations sur la sélection de la date |
| en semaine | Liste <string>? | Étiquettes personnalisées en semaine, devrait commencer avec le dimanche |
| SEMBRE | TextStyle? | Style de texte personnalisé pour les étiquettes en semaine |
| en semaine | WeekdayLabelBuilder? | Fonction pour fournir un contrôle complet sur un widget d'étiquette en semaine |
| Premier jour de semaine | int? | Index du premier jour de la semaine, où 0 point jusqu'à dimanche et 6 points à samedi. |
| LASTMOMMONTHICON | Widget? | Icône personnalisée pour le contrôle du bouton du mois dernier |
| Hidelastmonthicon | bool? | Icône de drapeau pour cacher le mois dernier |
| Nextmonthicon | Widget? | Icône personnalisée pour le contrôle du bouton du mois prochain |
| Hidenextmonthicon | bool? | Icône de drapeau pour cacher le mois prochain |
| ControlSheight | double? | Hauteur personnalisée pour la taille de la togne de contrôle du calendrier |
| ControlSextstyle | TextStyle? | Style de texte personnalisé pour le contrôle de bascule du mode calendrier |
| CenteralignModepicker | bool? | Flag pour centraliser l'étiquette de texte de l'année et du mois dans les contrôles |
| modépickersgap | double? | Distance d'écart personnalisée entre le mois et les sélecteurs de mode |
| disablemodepicker | bool? | Facier pour désactiver le sélecteur en mode et masquer l'icône à bascule |
| modépickertexthandler | Modépickertexthandler? | Fonction à contrôler le sélecteur en mode affiché du texte |
| modépickerbuilder | ModePickerBuilder? | Fonction pour fournir un contrôle total sur l'interface utilisateur du mode de mode |
| CUSTOMDERPICKERICON | Widget? | Icône personnalisée pour l'icône du bouton de sélecteur de mode |
| usabbrlabellormonethmodepicker | bool? | Utilisez l'étiquette d'abréviation pour le sélecteur de mode mois, ne fonctionne que lorsque le sélecteur de mois est activé |
| dayViewController | PageController? | Contrôleur de page personnalisé pour la vue de la journée civile |
| daymaxwidth | double? | Largeur maximale du widget de jour. Lorsque [DaymaxWidth] n'est pas nul, il remplacera les paramètres de taille par défaut |
| dayborderradius | Borderradius? | Rayon de bordure personnalisé pour indicateur de jour |
| daytextstyle | TextStyle? | Style de texte personnalisé pour la journée civile (s) |
| Aujourd'hui | TextStyle? | Style de texte personnalisé pour la journée civile actuelle (s) |
| handicapdaytextstyle | TextStyle? | Style de texte personnalisé pour la journée civile handicapée (s) |
| daytextstylepredicate | DaytextStylepredicate? | Fonction pour fournir un contrôle total sur le (s) jour (s) STYLE STYLE DE Texte |
| Sélectionné. | Couleur? | Le jour de la couleur. |
| Sélectionné | TextStyle? | Style de texte personnalisé pour la journée civile sélectionnée (s) |
| selectableDayPredicate | SelectableDayPredicate? | Fonction pour fournir un contrôle total sur les dates du calendrier |
| sélectionné | TextStyle? | Style de texte personnalisé pour la journée de calendrier sélectionnée |
| SelectedRangeHighlightColor | Couleur? | La couleur de surbrillance pour la journée incluse dans la gamme sélectionnée |
| sélectionné dedecoration pré-dicatrice | Sélectionnée d'origine PRÉCITE? | Prédicat pour déterminer la décoration du boîtier du widget de jour pour une journée dans la plage sélectionnée |
| SelectRangeHighlightbuilder | SelectedRangeHighlightBuilder? | Fonction pour fournir un contrôle total sur la mise en évidence |
| Daysplashcolor | Couleur? | La couleur des éclaboussures du widget de jour |
| amateur de jour | Daybuilder? | Fonction pour fournir un contrôle total sur un widget UI |
| daymodescrolldirection | Axe? | Direction de défilement de l'axe pour [CalendardatePicker2Mode.Day] Mode |
| MonthiewController | ScrollController? | Contrôleur de défilement personnalisé pour la vue du mois civil |
| constructeur de mois | Mois de mois? | Fonction pour fournir un contrôle total sur un widget UI |
| Hidemithpickerdividers | bool? | Drapeau pour masquer les séparateurs sur le cueilleur de mois |
| selectableMonthPredicate | SelectableMemHpredicate? | Fonction pour fournir un contrôle complet sur le mois du mois dans la liste des mois. |
| Disablemonthpicker | bool? | Drapeau pour désactiver le cueilleur de mois |
| Monthtextstyle | TextStyle? | Style de texte personnalisé pour les mois |
| Sélectionné demonthtextstyle | TextStyle? | Style de texte personnalisé pour les mois sélectionnés (s) sélectionnés |
| Disablemonthtextstyle | TextStyle? | Style de texte personnalisé pour les mois handicapés (s) |
| Année ViewController | ScrollController? | Contrôleur de défilement personnalisé pour la vue de l'année civile |
| Année Borderradius | Borderradius? | Radius frontalier personnalisé pour l'indicateur de l'année |
| YearTextStyle | TextStyle? | Style de texte personnalisé pour l'année (s) |
| se sélectionné | TextStyle? | Style de texte personnalisé pour les années sélectionnées (s) |
| handicapytextstyle | TextStyle? | Style de texte personnalisé pour l'année handicapée (s) |
| sélectionnableyarpredicate | SelectableyArpredicate? | Fonction pour fournir un contrôle total au cours de la liste de l'année de l'année. |
| constructeur | Builder d'année? | Fonction pour fournir un contrôle complet sur un widget UI |
| hideyarpickerdividers | bool? | Drapeau pour cacher des séparateurs sur un cueilleur d'année |
| ScrollViewTopheaderTextStyle | TextStyle? | Style de texte personnalisé pour faire défiler la tête des étiquettes de la semaine supérieure |
| HidescrollViewTopheader | bool? | Flag pour masquer l'en-tête des étiquettes de la semaine supérieure sur la vue de défilement |
| HidescrollViewTopheaderDivider | bool? | Flag pour masquer le diviseur d'en-tête des étiquettes des meilleures semaines sur la vue de défilement |
| HidescrollViewmonthweekHeader | bool? | Drapeau pour cacher le mois de la semaine calendrier |
| ScrollViewConstraints | BoxConstraints? | BoxConstraints pour la vue du calendrier de défilement, fonctionne uniquement pour le mode défilement |
| ScrollViewmonthyEarbuilder | ScrollViewMonthyEarbuilder? | Fonction pour fournir un contrôle total sur l'année du calendrier du défilement |
| ScrollViewOnScrolling | ScrollViewonscrolling? | Fonction à rappeler sur le défilement sur la vue de défilement |
| scrollViewController | ScrollController? | Contrôleur de défilement personnalisé à la vue du calendrier de défilement |
| Option | Taper | Description |
|---|---|---|
| Gapbetweencalendarandbuttons | double? | L'écart entre le calendrier et les boutons d'action |
| annuler | TextStyle? | Style de texte pour le bouton Annuler |
| annuler | Widget? | Bouton d'annuler personnalisé |
| okbuttontextstyle | TextStyle? | Style de texte pour le bouton OK |
| Okbutton | Widget? | Bouton OK personnalisé |
| ouvert à l'ouvrage | bool? | Le calendrier est-il ouvert à partir de la boîte de dialogue |
| CloseLialogoncanceltAPP | bool? | Fermez la boîte de dialogue après que l'utilisateur tape le bouton Annuler |
| fermé à ciel | bool? | Fermez la boîte de dialogue après que l'utilisateur tape sur le bouton OK |
| bouton | EdgeInsets? | Bouchage d'emballage personnalisé pour les boutons OK & Annuler |
En utilisant les configurations ci-dessus, vous pouvez faire votre propre cueilleur de calendrier personnalisé comme besoin.
CalendarDatePicker2WithActionButtons (
config : CalendarDatePicker2WithActionButtonsConfig (
firstDayOfWeek : 1 ,
calendarType : CalendarDatePicker2Type .range,
selectedDayTextStyle : TextStyle (color : Colors .white, fontWeight : FontWeight .w700),
selectedDayHighlightColor : Colors .purple[ 800 ],
centerAlignModePicker : true ,
customModePickerIcon : SizedBox (),
dayBuilder : _yourDayBuilder,
yearBuilder : _yourYearBuilder,
),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Ce package a des supports multi-langues. Pour l'activer, ajoutez votre Locale dans le MaterialApp d'emballage:
MaterialApp (
localizationsDelegates : GlobalMaterialLocalizations .delegates,
supportedLocales : const [
Locale ( 'en' , '' ),
Locale ( 'zh' , '' ),
Locale ( 'ru' , '' ),
Locale ( 'es' , '' ),
Locale ( 'hi' , '' ),
],
...
); |  |  |  |
|---|---|---|---|
| 中文 | русский | español | हिंदी |
N'hésitez pas à contribuer à ce projet. ? Les demandes de traction sont les bienvenues!
Il y a quelques conseils avant de créer un PR:
dart format . -l 80 Si vous n'utilisez pas de code vsfix: suivre cette convention GIT feat:
