🧩TimePicker

TimePicker в Flutter

Что такое TimePicker?

TimePicker — это диалоговое окно в Flutter, позволяющее пользователю выбрать время (часы и минуты). Это полезно, когда приложение требует, чтобы пользователь указал определённое время, например, для будильника, напоминания или бронирования.

Аналогия: Представьте себе обычные часы со стрелками, на которых можно установить время. TimePicker работает примерно так же: он открывает интерфейс, где вы выбираете нужные вам часы и минуты, после чего возвращает выбранное время в приложении.

Пример использования TimePicker

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (picked != null) {
    print("Выбранное время: ${picked.format(context)}");
  }
}

В этом примере используется функция showTimePicker, которая открывает диалоговое окно для выбора времени. initialTime устанавливает начальное время, которое отображается при открытии.

Пояснение кода

1. Future<void> — функция асинхронная, так как showTimePicker возвращает Future, который выполняется, когда пользователь выбирает время или закрывает окно.

2. TimeOfDay.now() — устанавливает текущее время по умолчанию в TimePicker.

3. picked?.format(context) — преобразует выбранное время в строку формата времени.

---

Все настройки TimePicker с пояснениями и примерами

1. BuildContext context

Описание: Контекст, необходимый для отображения диалогового окна в нужной части иерархии виджетов. Пример:

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
)

---

2. required TimeOfDay initialTime

Описание: Устанавливает начальное время, отображаемое при открытии диалогового окна. Пример:

initialTime: TimeOfDay(hour: 10, minute: 30) // Начальное время — 10:30

---

3. bool useRootNavigator = true

Описание: Определяет, должен ли TimePicker использовать корневой навигатор. Полезно при наличии нескольких навигаторов в приложении. Пример:

useRootNavigator: false // Использует ближайший навигатор

---

4. RouteSettings? routeSettings

Описание: Настройки для маршрута, по которому открывается диалоговое окно. Пример:

routeSettings: RouteSettings(name: "timePicker") // Имя маршрута для TimePicker

---

5. TextDirection? textDirection

Описание: Устанавливает направление текста, может быть ltr (слева направо) или rtl (справа налево). Пример:

textDirection: TextDirection.rtl // Текст отображается справа налево

---

6. bool builder

Описание: Позволяет настраивать стиль или обернуть TimePicker в другие виджеты, используя кастомный WidgetBuilder. Пример:

builder: (context, child) {
  return Theme(
    data: ThemeData.dark(), // Применяет тёмную тему к TimePicker
    child: child!,
  );
}

---

7. bool initialEntryMode = TimePickerEntryMode.dial

Описание: Определяет начальный режим выбора времени: dial для выбора с помощью циферблата и input для ввода времени с клавиатуры. Пример:

dartКопировать кодinitialEntryMode: TimePickerEntryMode.input // Открывает клавиатуру для ввода