Во Flutter поля ввода даты являются важным компонентом, когда дело доходит до сбора и проверки дат в мобильном приложении. В этой статье мы рассмотрим различные методы реализации полей ввода даты во Flutter, сопровождаемые примерами кода. К концу вы получите четкое представление о том, как создавать и настраивать средства выбора дат, обрабатывать вводимые пользователем данные и обеспечивать удобство работы с пользователем.

Метод 1: использование пакета DateTimePicker
Чтобы упростить процесс реализации полей ввода даты, мы можем использовать внешние пакеты. Один из таких пакетов — datetime_picker_formfield. Для начала добавьте пакет в файл pubspec.yamlи импортируйте его в файл Dart:

import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';

Затем вы можете создать поле ввода даты с помощью виджета DateTimeField:

DateTimeField(
  format: DateFormat("yyyy-MM-dd"),
  onShowPicker: (context, currentValue) async {
    final date = await showDatePicker(
      context: context,
      initialDate: currentValue ?? DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    return date;
  },
)

Метод 2: использование виджета выбора даты Flutter
Flutter предоставляет встроенный виджет выбора даты, который можно использовать для создания полей ввода даты. Вот пример того, как его использовать:

TextFormField(
  controller: _dateController,
  onTap: () async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _selectedDate)
      setState(() {
        _selectedDate = picked;
        _dateController.text = DateFormat('yyyy-MM-dd').format(_selectedDate);
      });
  },
  decoration: InputDecoration(
    labelText: 'Select Date',
  ),
)

Метод 3: использование средства выбора даты Flutter Cupertino
Если вы хотите предоставить поле ввода даты с помощью средства выбора в стиле Купертино, вы можете использовать виджет CupertinoDatePicker. Вот пример:

CupertinoTextField(
  controller: _dateController,
  readOnly: true,
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext builder) {
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 3,
          child: CupertinoDatePicker(
            mode: CupertinoDatePickerMode.date,
            initialDateTime: DateTime.now(),
            onDateTimeChanged: (DateTime newDateTime) {
              setState(() {
                _selectedDate = newDateTime;
                _dateController.text =
                    DateFormat('yyyy-MM-dd').format(_selectedDate);
              });
            },
          ),
        );
      },
    );
  },
  decoration: InputDecoration(
    labelText: 'Select Date',
  ),
)

Поля ввода даты имеют решающее значение для сбора и проверки дат в приложении Flutter. В этой статье мы рассмотрели три различных метода реализации полей ввода даты с использованием различных виджетов и пакетов Flutter. Предпочитаете ли вы виджет Flutter по умолчанию, внешний пакет или средство выбора в стиле Купертино, теперь у вас есть знания для создания полей ввода даты, которые легко интегрируются в ваше мобильное приложение. Приятного кодирования!