How to hide date in hours? - ToDo List App/Flutter

Question

I am making a simple ToDO List App in Flutter(Dart). To the screen, where user can add your task I added a button, which open dialog with calendar, so user can choose the reminder date. Everything works good but there is a little problem. After the date has been selected, it shows at the screen, but like that:

I don't want date with hours/minutes/seconds because it looks like ugly. Any advices how to remove this?

Here is my code:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class AddTaskScreen extends StatefulWidget {
  const AddTaskScreen({super.key});

  @override
  State<AddTaskScreen> createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen> {
  bool isshow = false;
  var initialDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final pickedDate = await showDatePicker(
        context: context,
        initialDate: initialDate,
        firstDate: DateTime.now(),
        lastDate: DateTime(2100));
    if (pickedDate != null && pickedDate != initialDate)
      setState(() {
        initialDate = pickedDate;
      });
  }

  @override
  Widget build(context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              'assets/images/rocket.jpg',
            ),
            const SizedBox(
              height: 30,
            ),
            const SizedBox(
              width: 370,
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Add new task',
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Visibility(
              visible: isshow,
              child: const SizedBox(
                width: 370,
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Add details',
                  ),
                ),
              ),
            ),
            Row(
              children: [
                const Text(
                  "You selected: ",
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  initialDate.toString(),
                  style: const TextStyle(fontSize: 20),
                ),
              ],
            ),
            Row(
              children: [
                Column(
                  children: [
                    Row(
                      children: [
                        IconButton(
                            onPressed: () {
                              setState(
                                () {
                                  isshow = !isshow;
                                },
                              );
                            },
                            icon: const Icon(Icons.sort)),
                        IconButton(
                          onPressed: () => _selectDate(context),
                          icon: const Icon(Icons.calendar_month),
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(
                  width: 150,
                ),
                Column(
                  children: [
                    Row(
                      children: [
                        TextButton(
                          onPressed: () {},
                          child: const Text(
                            "Add Task",
                            style: TextStyle(
                                fontSize: 15,
                                color: Color.fromARGB(255, 12, 130, 226)),
                          ),
                        ),
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text(
                            "Cancel",
                            style: TextStyle(
                                fontSize: 15,
                                color: Color.fromARGB(255, 12, 130, 226)),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

I use Windows 11, Visual Studio Code and Flutter 3.7.8

I tried to add properties to initialdate variable like initialdate.day or initialdate.year but I can add only one property like that to this variable. It isn't this what I want, because I want to have year, month and day in date, not only one of them.

Answer 1

DateTime date = DateTime.now();
String today = '${date.hour}-${date.minute}-${date.second}';

Using this you can get hour, minute, seconds, miliseconds, microseconds, day, month, year anything you want and format them however you want.

Answer 2

You can change your date format like this

Text(
    initialDate.toString().split(' ')[0],
    style: const TextStyle(fontSize: 20),
)