1

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:

enter image description here

But for now is in this way:

enter image description here

1 Answer 1

1

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.