calendar_date_picker2
v1.1.8
Un selector de calendario liviano y personalizable basado en Flutter CalendAdatePicker, con soporte para seleccionador de una sola fecha, seleccionador de rango y Picker múltiple.
 |  |  |  |
|---|---|---|---|
| modo único | modo múltiple | modo de alcance | función de diálogo |
| solo pergamino | múltiples desplazamiento | desplazamiento de rango | desplazamiento de diálogo |
CalendAdatePicker2 consta de dos widgets principales:
CalendarDatePicker2 , este widget solo incluye la interfaz de usuario del calendario y emitirá eventos cada vez que el usuario aproveche una fecha diferente.CalendarDatePicker2WithActionButtons , este widget incluye la interfaz de usuario del calendario y los botones de acción (Cancelar y OK). Este widget solo emitirá el valor actualizado cuando el botón 'OK' 'OK' de User Taps. null INITIADATEshowCalendarDatePicker2Dialog incorporado La versión 1.xx, por defecto, habilitará el selector de mes. Si desea migrar a V1.XX desde V0.XX y desea mantener el antiguo comportamiento, deberá establecer disableMonthPicker en true .
Asegúrese de consultar ejemplos para obtener más detalles.
Agregue la siguiente línea a pubspec.yaml :
dependencies :
calendar_date_picker2 : ^1.1.8El ejemplo completo está disponible aquí.
CalendAdatePicker2 requiere que proporcione config y value :
config contiene las configuraciones para la configuración de su calendario y la interfaz de usuario.value es los valores iniciales que se pasan a su selección de calendario, value debe ser una List . CalendarDatePicker2 (
config : CalendarDatePicker2Config (),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Durante la inicialización de CalendarDatePicker2Config , el calendarType de la instancia de configuración se establecerá de forma predeterminada en CalendarDatePicker2Type.single , por lo que no tiene que configurar el tipo de calendario específicamente.
Para usar el selector de fecha de modo múltiple, deberá establecer el calendario de configuración en CalendarDatePicker2Type.multi :
CalendarDatePicker2 (
config : CalendarDatePicker2Config (
calendarType : CalendarDatePicker2Type .multi,
),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Para usar el selector de fecha de modo de rango, deberá establecer el calendario de configuración en CalendarDatePicker2Type.range :
CalendarDatePicker2 (
config : CalendarDatePicker2Config (
calendarType : CalendarDatePicker2Type .range,
),
value : _dates,
onValueChanged : (dates) => _dates = dates,
); Este paquete incluye soporte incorporado para mostrar el calendario como diálogo. Para usarlo, deberá llamar showCalendarDatePicker2Dialog , que toma tres argumentos requeridos: context , config , dialogSize :
...
var results = await showCalendarDatePicker2Dialog (
context : context,
config : CalendarDatePicker2WithActionButtonsConfig (),
dialogSize : const Size ( 325 , 400 ),
value : _dates,
borderRadius : BorderRadius . circular ( 15 ),
);
...| Argumento | Tipo | Descripción |
|---|---|---|
| configuración | CalendardatePicker2Config | Configuraciones relacionadas con la interfaz de usuario del calendario |
| valor | List <DateTime?> | El [DateTime] seleccionado que el selector debe mostrar. |
| onvaluechanged | ValueChanged <List <Stetime>>? | Llamado cuando cambiaron las fechas seleccionadas |
| visualizado MonthDate | ¿De fecha y hora? | Fecha para controlar el calendario mostrado mes |
| Ondisplayedmonthanged | ValueChanged <Stetime>? | Llamado cuando el usuario navega a un nuevo mes/año en el selector en modo no desplazamiento |
| Opción | Tipo | Descripción |
|---|---|---|
| calendario | ¿CalendarDatePicker2Type? | Tipo de selección de calendario, tiene 3 valores: rango único, multi, |
| RangeBidireccional | ¿Bool? | Bandera para habilitar la selección del rango de fechas también en orden chronológico inverso |
| primera fecha | ¿De fecha y hora? | El primer usuario de fecha y fecha de fecha, puede seleccionar |
| última hora | ¿De fecha y hora? | El último usuario de fecha y hora permitido puede seleccionar |
| date de actualidad | ¿De fecha y hora? | La representación de fecha y hora de hoy que se describirá en el calendario |
| calendarviewmode | CalendARDATEPICKER2MODE? | La vista inicialmente mostrada del selector de calendario, con cuatro opciones disponibles: día, mes, año y desplazamiento |
| calendarviewscrollphysics | Scrollphysics? | La física de desplazamiento para la vista del mes calendario |
| dynamiccalendarrows | ¿Bool? | Bandera para habilitar filas calendario dinámicas basadas en un mes específico |
| Elección de nombre de nombre | ¿Bool? | FLAG para controlar el comportamiento [OnValueChanged] |
| animatetodisplayedmonthdate | ¿Bool? | Bandera para animar siempre a la pantalla visualizada |
| semántico | ¿Mapa? | Diccionario personalizado para etiquetas de semántica |
| deshabilitar la vibración | ¿Bool? | FLAG para deshabilitar la vibración en la selección de la fecha |
| Ligas de los días de semana | Lista <String>? | Etiquetas personalizadas de lunes a viernes, deberían comenzar con el domingo |
| setwaylabelTextStyle | ¿TextStyle? | Estilo de texto personalizado para etiquetas de lunes a viernes |
| viernesdabelbuilder | ¿Daylabelbuilder de lunes a semana? | Función para proporcionar un control completo sobre el widget de la etiqueta de los días entre semana |
| Primer día de semana | int? | Índice del primer día de la semana, donde 0 puntos hasta el domingo y 6 puntos hasta el sábado. |
| Último Monthicon | Widget? | Icono personalizado para el control del botón del mes pasado |
| hidelastmonthicon | ¿Bool? | Flag para esconder el icono del mes pasado |
| Nextmonticon | Widget? | Icono personalizado para el control del botón del próximo mes |
| Hidenextmonthicon | ¿Bool? | Flag para esconder el ícono del próximo mes |
| control | ¿doble? | Altura personalizada para la altura de Toggle de control de calendario |
| ControlStextStyle | ¿TextStyle? | Estilo de texto personalizado para el control del modo calendario |
| moderno central | ¿Bool? | Bandera para centralizar la etiqueta de texto de año y mes en los controles |
| Modepickersgap | ¿doble? | Distancia de la brecha personalizada entre los recolectores de modo mes y año |
| discapacitante | ¿Bool? | Indicando para deshabilitar el selector de modo y ocultar el icono de alternar |
| modePickeTexthandler | ¿ModepickerTexThandler? | TEXTO MOSTRADO DEL MODO DE MODO FUNCIONA A CONTROL |
| ModepickerBuilder | ModepickerBuilder? | Función para proporcionar un control completo sobre la interfaz de usuario del selector de modo |
| almodomato | Widget? | Icono personalizado para el icono del botón de selección de modo |
| useebbrlabelformonthmodepicker | ¿Bool? | Use la etiqueta de abreviación para el selector de modo mes, solo funciona cuando el selector de mes está habilitado |
| controlador de día | Pagecontroller? | Controlador de página personalizado para la vista del día del calendario |
| daymaxwidth | ¿doble? | Widget de ancho máximo del día. Cuando [DayMaxWidth] no es nulo, anulará la configuración del tamaño predeterminado |
| Dayberradius | Borderradius? | Radio de borde personalizado para el indicador de día |
| estilo de día | ¿TextStyle? | Estilo de texto personalizado para días calendario |
| hoyTextStyle | ¿TextStyle? | Estilo de texto personalizado para los días calendarios actuales |
| DISPABILIDO DayTextStyle | ¿TextStyle? | Estilo de texto personalizado para días calendario para discapacitados |
| DayTextStylePredicate | DayTextStylePredicate? | Función para proporcionar un control completo sobre el estilo de texto del día calendario |
| Seleccionado DayhighLightColor | ¿Color? | El día de color destacado seleccionado |
| Seleccionado DayTextStyle | ¿TextStyle? | Estilo de texto personalizado para días calendarios seleccionados |
| selectableAlyPredicate | SelectableAyPredicate? | Función para proporcionar un control completo sobre qué fechas en el calendario se pueden seleccionar |
| selectionRangedayTextStyle | ¿TextStyle? | Estilo de texto personalizado para días calendario de rango seleccionado |
| seleccionado rangehighlightcolor | ¿Color? | El color destacado para el día (s) incluido en la gama seleccionada |
| selectionRangedecorationPredicate | ¿SelectionRangedecorationPredicate? | Predicarse para determinar la decoración del cuadro de widget del día durante un día en el rango seleccionado |
| SelectionRangeHighLightBuilder | ¿SelectionRangeHighLightBuilder? | Función para proporcionar un control completo sobre el resaltar de selección de rango |
| daysplashcolor | ¿Color? | El color de color del día del día |
| creador de días | ¿Daybuilder? | Función para proporcionar un control total sobre la interfaz de usuario del widget del día |
| DayModescrolldirection | ¿Eje? | Dirección de desplazamiento del eje para [calendarDatePicker2Mode.day] Modo |
| MessViewController | ScrollController? | Controlador de desplazamiento personalizado para la vista del mes calendario |
| constructor de mensajes | ¿Monthbuilder? | Función para proporcionar control total sobre la interfaz de usuario de widget de mes |
| hidemonthpickerdividers | ¿Bool? | Bandera para ocultar divisores en el mes |
| selectAblEmemonThpredicate | SelectAblEmonThpredicate? | Función para proporcionar un control completo sobre qué mes en la lista de mes se puede seleccionar. |
| dislaplemonthpicker | ¿Bool? | Bandera para deshabilitar el selector de mes |
| Estilo de texto mensual | ¿TextStyle? | Estilo de texto personalizado para mes |
| Seleccionado MonthTextStyle | ¿TextStyle? | Estilo de texto personalizado para meses seleccionados |
| discapacitado MonthTextStyle | ¿TextStyle? | Estilo de texto personalizado para mes para discapacitados |
| AnyearViewController | ScrollController? | Controlador de desplazamiento personalizado para la vista del año calendario |
| AñoBorradius | Borderradius? | Radio de borde personalizado para el indicador de año |
| estilo de texto | ¿TextStyle? | Estilo de texto personalizado para el año (s) |
| SelectyEarTextStyle | ¿TextStyle? | Estilo de texto personalizado para años seleccionados |
| DISABLAYAYEXTSTYLY | ¿TextStyle? | Estilo de texto personalizado para año discapacitado |
| selectable yearpredicate | Selectableyearpredicate? | Función para proporcionar un control completo sobre qué año en la lista de año se selecciona. |
| constructor de años | ¿El constructor de años? | Función para proporcionar control total sobre la interfaz de usuario de widget de año |
| hideyearpickerdividers | ¿Bool? | Bandera para ocultar divisores en el anotador |
| scrollViewTopheAteRtextStyle | ¿TextStyle? | Estilo de texto personalizado para el encabezado de etiquetas de la semana de vista de desplazamiento |
| hidescrollviewtoPheader | ¿Bool? | Bandera para ocultar el encabezado de etiquetas de la semana superior en el selector de vista de desplazamiento |
| hidescrollviewTopheaderDivider | ¿Bool? | Bandera para ocultar la semana superior Divisor de encabezado de etiquetas en la vista de desplazamiento |
| hidescrollviewmonthweekheadheader | ¿Bool? | Bandera para esconder el mes de la semana calendario del mes encabezado en la vista de desplazamiento |
| ScrollViewConstraints | ¿CONSTRAINTAS DE CAJA? | BoxConstraints para la vista del calendario de desplazamiento, solo funciona para el modo de desplazamiento |
| ScrollViewMonthYearBuilder | ScrollViewMonthyearBuilder? | Función para proporcionar un control total sobre la interfaz de usuario del mes calendario de desplazamiento |
| scrollviewonscrolling | ScrollViewonsCrolling? | Función a devolución de llamada sobre desplazamiento en la vista de desplazamiento |
| ScrollViewController | ScrollController? | Controlador de desplazamiento personalizado a la vista del calendario de desplazamiento |
| Opción | Tipo | Descripción |
|---|---|---|
| GAPBETWEENCALENDARANDBUTONS | ¿doble? | La brecha entre el calendario y los botones de acción |
| cancelButTontextStyle | ¿TextStyle? | Estilo de texto para el botón Cancelar |
| CancelButton | Widget? | Botón de cancelación personalizado |
| OkButTontextStyle | ¿TextStyle? | Estilo de texto para el botón OK |
| okbutton | Widget? | Botón OK personalizado |
| abierto de la creación | ¿Bool? | ¿El calendario se abre desde el diálogo? |
| Cerrado AGONCANCELTEPPADO | ¿Bool? | Cerrar el diálogo después de que el usuario golpee el botón Cancelar |
| Cerrado Alogonktapped | ¿Bool? | Cerrar el diálogo después de que el usuario golpee el botón OK |
| bote de botones | ¿EDGEINESETS? | Relleno de envoltura personalizado para botones OK y Cancelar |
Al usar las configuraciones anteriores, puede hacer su propio selector de calendario personalizado como su necesidad.
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,
); Este paquete tiene soportes de varios idiomas. Para habilitarlo, agregue su Locale al MaterialApp de envoltura:
MaterialApp (
localizationsDelegates : GlobalMaterialLocalizations .delegates,
supportedLocales : const [
Locale ( 'en' , '' ),
Locale ( 'zh' , '' ),
Locale ( 'ru' , '' ),
Locale ( 'es' , '' ),
Locale ( 'hi' , '' ),
],
...
); |  |  |  |
|---|---|---|---|
| 中文 | русий | español | हिंदी |
Siéntase libre de contribuir a este proyecto. ? ¡Las solicitudes de extracción son bienvenidas!
Hay algunos consejos antes de crear un PR:
dart format . -l 80 Si no está usando el código VSfeat: o fix: a su confirmación de relaciones públicas
