Steps to reproduce

The ShadTimePicker defines various layout properties, including:

• fieldWidth
• fieldPadding
• style
• spacing

All of these properties impact content size, and can do so in opposing ways.

For example, I want my time picker to fit on a single line in my app. Initially, it didn't, so I needed to adjust these values. I started by reducing the fieldWidth, but then my text was cut off. So then I took the padding down to zero, which resulted in the text being left aligned. So then I tried different padding values until the text looked centered again. However, this padding will be wrong as soon as I change the font size.

I think time picker is trying to do too many things all within a single widget and it has resulted in competing properties.

There should probably be a version of time picker that explicitly fits itself into a single line. This version of the widget could have properties like spacing, labelAlignment, and fieldTextAlignment. This version would essentially size itself using Row infrastructure.

Then, if people really do want a time picker that might break itself into multiple lines, that could be a different widget, which includes runSpacing and either fieldPadding or fieldWidth (not both).

PS - I went back to my code and added the AM/PM time period. There are even more sizing conflicts here.

I discovered that I can set a "min" width for the period field, but I can't set a regular width (like I can with the time components). Also, there's no padding for the period field, like the time components. So it seems that I physically can't size the period field to match my time component fields, unless I go with default values.

And I don't know why my digits are getting cutoff. I tried reducing the text size in the text style for the time picker in the theme. The text looks like it stayed the same size, but the height of the fields reduced.

Expected results

Properties don't conflict with each other.

Actual results

Properties do conflict with each other.

shadcn_ui version

0.18.0

Platform

MacOS

Code sample

https://flutter-shadcn-ui.mariuti.com/components/time-picker/

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Flutter 3.27.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 17025dd882 (5 weeks ago) • 2024-12-17 03:23:09 +0900
Engine • revision cb4b5fff73
Tools • Dart 3.6.0 • DevTools 2.40.2