In Flutter, you can use the built-in showDatePicker and showTimePicker functions to display date and time pickers. Below are examples of how to implement both.
- Date Picker You can use showDatePicker to display a date picker dialog and retrieve the selected date.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DateTimePickerDemo(),
);
}
}
class DateTimePickerDemo extends StatefulWidget {
@override
_DateTimePickerDemoState createState() => _DateTimePickerDemoState();
}
class _DateTimePickerDemoState extends State<DateTimePickerDemo> {
DateTime? selectedDate;
Future<void> _selectDate(BuildContext context) async {
final DateTime? pickedDate = await showDatePicker(
context: context,
initialDate: DateTime.now(), // Current date
firstDate: DateTime(2000), // Earliest date
lastDate: DateTime(2101), // Latest date
);
if (pickedDate != null && pickedDate != selectedDate)
setState(() {
selectedDate = pickedDate;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Date Picker")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
selectedDate == null
? 'No date selected!'
: 'Selected date: ${selectedDate.toString()}',
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _selectDate(context),
child: Text('Select Date'),
),
],
),
),
);
}
}
- Time Picker Similarly, you can use **showTimePicker **to display a time picker dialog.
Future<void> _selectTime(BuildContext context) async {
final TimeOfDay? pickedTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (pickedTime != null)
setState(() {
selectedTime = pickedTime;
});
}
To include both date and time pickers, you can modify the code to add a time picker next to the date picker.
- Date and Time Picker Combined
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DateTimePickerDemo(),
);
}
}
class DateTimePickerDemo extends StatefulWidget {
@override
_DateTimePickerDemoState createState() => _DateTimePickerDemoState();
}
class _DateTimePickerDemoState extends State<DateTimePickerDemo> {
DateTime? selectedDate;
TimeOfDay? selectedTime;
Future<void> _selectDate(BuildContext context) async {
final DateTime? pickedDate = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2101),
);
if (pickedDate != null && pickedDate != selectedDate)
setState(() {
selectedDate = pickedDate;
});
}
Future<void> _selectTime(BuildContext context) async {
final TimeOfDay? pickedTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (pickedTime != null && pickedTime != selectedTime)
setState(() {
selectedTime = pickedTime;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Date & Time Picker")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
selectedDate == null
? 'No date selected!'
: 'Selected date: ${selectedDate.toString()}',
),
Text(
selectedTime == null
? 'No time selected!'
: 'Selected time: ${selectedTime.format(context)}',
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _selectDate(context),
child: Text('Select Date'),
),
ElevatedButton(
onPressed: () => _selectTime(context),
child: Text('Select Time'),
),
],
),
),
);
}
Explanation:
- showDatePicker: Opens a date picker and returns the selected date.
- showTimePicker: Opens a time picker and returns the selected time.
Top comments (0)