Get the value of selected time and day using a DatePicker - flutter

Question

I am trying to get the value of the selected time and date when the Datepicker is shown.
I achieved the UI and shown the date and time picker when onTap.
The problem is that I can get the value after selected. The idea would be to render it somewhere in the screen as follows:
time selected: .....
date selected: .....
This is my code regarding the popUp of the DayPicker and the function that gets the value:
function and variables:
DateTime? _dateTime;
TimeOfDay _time = TimeOfDay(hour: 7, minute: 15);
void _selectTime() async {
final newTime = await showTimePicker(
context: context,
initialTime: _time,
initialEntryMode: TimePickerEntryMode.input,
);
if (newTime != null) {
setState(() {
_time = newTime;
});
}
}
Gesture Detector to show the PickerDate:
GestureDetector(
onTap: () {
showDatePicker(
context: context,
initialDate: _dateTime ?? DateTime.now(),
firstDate: DateTime(2021),
lastDate: DateTime(2023),
builder: (BuildContext context, Widget? child) {
return Theme(
data: ThemeData.light().copyWith(
primaryColor: context.themeSettings.lightRed,
accentColor: context.themeSettings.lightRed,
colorScheme: ColorScheme.light(primary: context.themeSettings.lightRed),
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
),
child: child!,
);
},
).then(
(date) {
setState(
() {
_dateTime = date;
},
);
print('date');
},
);
},
Gesture detector to show the DatePicker:
GestureDetector(
onTap: _selectTime,
child: Container(
decoration: BoxDecoration(
border: Border.all(color: context.themeSettings.mediumGray),
borderRadius: BorderRadius.all(Radius.circular(
5.0,
) //
),
),
width: width * 0.40,
height: height * 0.05,
child: Center(
child: Text(
'Pick a time',
style: TextStyle(fontSize: 18, color: context.themeSettings.darkText, fontWeight: FontWeight.bold),
),
),
),
),
The only thing missing is to show the actual value selected for both information.
what am I missing?

Answer 1

It remains only to display the time for the user. With Text().
Your time value in the _time variable
and dates in _dateTime
Text("time selected: $_time date selected: _dateTime",),
put this somewhere in your interface
for example in a child in GestureDetector
upd (24.08.2021):
I can not understand what your problem may be, according to the code fragments that you showed
Try to use code close to this
Source of code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue, brightness: Brightness.dark),
home: DatePickerDemo(),
);
}
}
class DatePickerDemo extends StatefulWidget {
#override
_DatePickerDemoState createState() => _DatePickerDemoState();
}
class _DatePickerDemoState extends State<DatePickerDemo> {
/// Which holds the selected date
/// Defaults to today's date.
DateTime selectedDate = DateTime.now();
_selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2000),
lastDate: DateTime(2025),
);
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"${selectedDate.toLocal()}".split(' ')[0],
style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold),
),
SizedBox(
height: 20.0,
),
ElevatedButton(
onPressed: () => _selectDate(context),
child: Text(
'Select date',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
),
],
),
),
);
}
}