I have a problem with creating a calendar widget where I will mark the date and time at the bottom.
How can I change the function to a widget so that the whole calendar is displayed on the screen? And also how to change the time to the one shown in the picture?
all advice is greatly appreciated
class ExampleCalendar extends StatefulWidget {
@override
_ExampleCalendarState createState() => _ExampleCalendarState();
static Route route() {
return MaterialPageRoute<void>(builder: (_) => ExampleCalendar());
}
}
class _ExampleCalendarState extends State<ExampleCalendar> {
DateTime setDate = DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
leading: IconButton(
icon: Icon(arrowBackIcon, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
),
body: _menuPage(context),
);
}
Widget _menuPage(BuildContext context) {
return SafeArea(
child: Align(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_calendar(context),
],
),
),
),
);
}
Widget _calendar(BuildContext context) {
return Container(
width: double.infinity,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.lightBlueAccent,
height: double.infinity,
child: TextButton(
child: Text(
DateFormat.Hm().format(this.setDate),
style: const TextStyle(
fontSize: 30.0,
color: Colors.black,
fontWeight: FontWeight.w500),
),
onPressed: openTimePicker
// SizedBox(width: 5)
),
), // color: Color.fromRGBO(7, 190, 200, 0.1),
),
Expanded(
child: Container(
color: Color.fromRGBO(7, 190, 200, 0.1),
height: double.infinity,
child: TextButton(
child: Text(
DateFormat('dd.MM').format(this.setDate),
style: TextStyle(
fontSize: 32.0,
color: Colors.black,
fontWeight: FontWeight.w500),
),
onPressed: () {
openDatePicker();
// SizedBox(width: 1),
Icon(
Icons.access_time,
size: 40,
color: Colors.lightBlueAccent,
);
}),
), // color: Color.fromRGBO(7, 190, 200, 0.1),
),
],
),
);
}
Here are two functions that i would like to turn into widgets so I don't have to click
Future<void> openTimePicker() async {
await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
helpText: "Choose Time")
.then((value) {
DateTime newDate = DateTime(
setDate.year,
setDate.month,
setDate.day,
value != null ? value.hour : setDate.hour,
value != null ? value.minute : setDate.minute);
setState(() => setDate = newDate);
print(newDate.hour);
print(newDate.minute);
});
}
SHOW DATE PICKER AND CHANGE CURRENT CHOOSE DATE
Future<void> openDatePicker() async {
await showDatePicker(
context: context,
initialDate: setDate,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 100000)))
.then((value) {
DateTime newDate = DateTime(
value != null ? value.year : setDate.year,
value != null ? value.month : setDate.month,
value != null ? value.day : setDate.day,
setDate.hour,
setDate.minute);
setState(() => setDate = newDate);
print(setDate.day);
print(setDate.month);
print(setDate.year);
});
}
}
I wish it looked like this:
But for now is in this way: