Функция showDateRangePicker

Функция showDateRangePicker показывает календарь для начала и конца периода. В context передают контекст экрана, первый день - в firstDate, последний - в lastDate, начальный диапазон - в initialDateRange типа DateTimeRange. Возвращает Future с DateTimeRange или null.

Синтаксис

showDateRangePicker(
	context: context,
	firstDate: DateTime(2020),
	lastDate: DateTime(2030),
	initialDateRange: DateTimeRange(
		start: DateTime(2024, 1, 1),
		end: DateTime(2024, 1, 7),
	),
)

Параметры

Параметр	Описание
`context`	Контекст активного экрана.
`firstDate`	Самая ранняя дата, которую можно выбрать.
`lastDate`	Самая поздняя дата, которую можно выбрать.
`initialDateRange`	Диапазон, выделенный при открытии.

Пример

Давайте откроем выбор диапазона по кнопке:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: RangeDemo()));
}

class RangeDemo extends StatelessWidget
{
	const RangeDemo({super.key});

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () async {
						await showDateRangePicker(
							context: context,
							firstDate: DateTime(2024),
							lastDate: DateTime(2025),
						);
					},
					child: Text('abcde'),
				),
			),
		);
	}
}

Откроется календарь Material для выбора двух дат.

Пример

Давайте покажем выбранный диапазон на экране:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: RangeDemo2()));
}

class RangeDemo2 extends StatefulWidget
{
	const RangeDemo2({super.key});

	@override
	State<RangeDemo2> createState() => _RangeDemo2State();
}

class _RangeDemo2State extends State<RangeDemo2>
{
	String label = '12345';

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () async {
						final range = await showDateRangePicker(
							context: context,
							firstDate: DateTime(2024),
							lastDate: DateTime(2025),
						);
						if (range != null) {
							setState(() {
								label = '${range.start.day}-${range.end.day}';
							});
						}
					},
					child: Text(label),
				),
			),
		);
	}
}

После выбора на кнопке появятся числа дней начала и конца.

Смотрите также

функция showDatePicker,
которая выбирает одну дату
класс DateTimeRange,
который хранит start и end
виджет CalendarDatePicker,
который рисует календарь на странице
функция showTimePicker,
которая выбирает время суток