DatePicker as a widget - Flutter

Question

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:

Solution

You are calling showDatePicker() and showTimePicker() when your buttons are clicked and you have Text(DateFormat('dd.MM').format(this.setDate) and Text(DateFormat.Hm().format(this.setDate) as values for your textButtons so this is the expected result.

If you want your widget looks like what you wish, for the calendar you can use CalendarDatePicker (The doc: https://api.flutter.dev/flutter/material/CalendarDatePicker-class.html)

and for the time picker you can use flutter_time_picker_spinner (https://pub.dev/packages/flutter_time_picker_spinner)or other similar packages on pubdev.