Flutter Container Border too tall

Question

I'm currently trying to rebuild a CSS layout in Flutter Web and I have the problem that the border of my container is too tall.

So my Question would be how to shrink the border?

It should look like this:

But mine looks like this:

My Code:

return Container(
        decoration: BoxDecoration(
          border: Border.all(width: 2.0, color: Colors.indigo),
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: maxWidth * 0.30,
              child: TextField(
                style: const TextStyle(
                  color: Color(0xFF3C3C3C),
                ),
                textAlign: TextAlign.center,
                enabled: false,
                controller: dateFieldController,
                decoration: const InputDecoration(
                  border: InputBorder.none,
                ),
              ),
            ),
            IconButton(
                onPressed: () async {
                  DateTime? pickedDate = await DatePicker.pickDate(
                      context, _initialDate, _firstDate, _lastDate);
                  if (pickedDate != null) {
                    _updatePage(pickedDate, _timePicked);
                  }
                },
                icon: const Icon(CupertinoIcons.calendar_today)),
          ],
        ),
      );

I already tried googling and changing the size of the Container, but both didn't work

Answer 1

try adding this to the IconButton:

padding: EdgeInsets.zero,
constraints: const BoxConstraints(maxHeight: 24),

And also this to the InputDecoration

isDense: true,