DatePicker

 

¿Qué es un DatePicker en Flutter?

Un DatePicker en Flutter es un widget que permite a los usuarios seleccionar una fecha de un calendario. Es una herramienta muy útil para aplicaciones que requieren que el usuario especifique una fecha, como por ejemplo, en formularios de registro, calendarios de eventos o aplicaciones de reserva.

¿Cómo se usa un DatePicker?

Flutter no tiene un widget DatePicker nativo como tal, pero proporciona la función showDatePicker para mostrar un diálogo de selección de fecha. Esta función devuelve un Future que se resuelve con la fecha seleccionada por el usuario o null si el usuario cancela la operación.

Ejemplo básico:

Dart

import 'package:flutter/material.dart';

class MyDatePickerExample extends StatefulWidget {
  @override
  _MyDatePickerExampleState createState() => _MyDatePickerExampleState();
}

class _MyDatePickerExampleState extends State<MyDatePickerExample> {
  DateTime? selectedDate;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,   
      initialDate: selectedDate ?? DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),   
    );
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:    Text('DatePicker Example'),
      ),
      body: Center(
        child: Text(selectedDate == null ? 'Select date' : selectedDate.toString()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _selectDate(context),
        child: Icon(Icons.calendar_today),
      ),
    );
  }
}

Explicación del código:

• showDatePicker: Muestra un diálogo con el selector de fechas.
• initialDate: La fecha que se mostrará seleccionada por defecto.
• firstDate y lastDate: Definen el rango de fechas permitidas.
• setState: Actualiza la interfaz de usuario para mostrar la fecha seleccionada.

Personalización del DatePicker

La función showDatePicker ofrece varias opciones para personalizar el aspecto y comportamiento del selector de fechas, como:

• locale: Para mostrar el calendario en diferentes idiomas.
• textDirection: Para ajustar la dirección del texto (izquierda a derecha o derecha a izquierda).
• builder: Para personalizar la apariencia del diálogo.

Integración con otros widgets

El DatePicker se suele integrar con otros widgets como TextField para mostrar la fecha seleccionada al usuario. Puedes utilizar un TextEditingController para sincronizar el valor del TextField con la fecha seleccionada.

Consideraciones adicionales:

• Fecha y hora: Si necesitas seleccionar tanto la fecha como la hora, puedes usar la función showTimePicker de manera similar.
• Rangos de fechas: Puedes restringir las fechas seleccionables utilizando los parámetros firstDate y lastDate.
• Formateado de fechas: Puedes formatear la fecha seleccionada de acuerdo a tus necesidades utilizando bibliotecas como intl.

En resumen, el DatePicker es una herramienta esencial para cualquier aplicación que requiera que el usuario seleccione una fecha. Es fácil de usar y altamente personalizable.