[Material] Misc fixes for time picker input mode (#60991)

packages/flutter/lib/src/material/time_picker.dart

@@ -1430,8 +1430,9 @@ class _TimePickerInputState extends State<_TimePickerInput> {
                     ),
                 ],
               )),
-              Padding(
-                padding: const EdgeInsets.only(top: 20.0),
+              Container(
+                margin: const EdgeInsets.only(top: 8.0),
+                height: _kTimePickerHeaderControlHeight,
                 child: _StringFragment(timeOfDayFormat: timeOfDayFormat),
               ),
               Expanded(child: Column(
@@ -1532,17 +1533,19 @@ class _HourMinuteTextFieldState extends State<_HourMinuteTextField> {
   @override
   Widget build(BuildContext context) {
     final ThemeData theme = Theme.of(context);
+    final TimePickerThemeData timePickerTheme = TimePickerTheme.of(context);
     final ColorScheme colorScheme = theme.colorScheme;
 
-    final InputDecorationTheme inputDecorationTheme = TimePickerTheme.of(context).inputDecorationTheme;
+    final InputDecorationTheme inputDecorationTheme = timePickerTheme.inputDecorationTheme;
     InputDecoration inputDecoration;
     if (inputDecorationTheme != null) {
       inputDecoration = const InputDecoration().applyDefaults(inputDecorationTheme);
     } else {
+      final Color unfocusedFillColor = timePickerTheme.hourMinuteColor ?? colorScheme.onSurface.withOpacity(0.12);
       inputDecoration = InputDecoration(
-        contentPadding: const EdgeInsetsDirectional.only(bottom: 16.0, start: 3.0),
+        contentPadding: EdgeInsets.zero,
         filled: true,
-        fillColor: focusNode.hasFocus ? colorScheme.surface : colorScheme.onSurface.withOpacity(0.12),
+        fillColor: focusNode.hasFocus ? Colors.transparent : unfocusedFillColor,
         enabledBorder: const OutlineInputBorder(
           borderSide: BorderSide(color: Colors.transparent),
         ),
@@ -1566,28 +1569,26 @@ class _HourMinuteTextFieldState extends State<_HourMinuteTextField> {
       hintText: focusNode.hasFocus ? null : _formattedValue,
     );
 
-    return Column(
-      children: <Widget>[
-        SizedBox(
-          height: _kTimePickerHeaderControlHeight,
-          child: MediaQuery(
-            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
-            child: TextFormField(
-              focusNode: focusNode,
-              textAlign: TextAlign.center,
-              keyboardType: TextInputType.number,
-              style: widget.style.copyWith(color: colorScheme.onSurface),
-              controller: controller,
-              decoration: inputDecoration,
-              validator: widget.validator,
-              onEditingComplete: () => widget.onSavedSubmitted(controller.text),
-              onSaved: widget.onSavedSubmitted,
-              onFieldSubmitted: widget.onSavedSubmitted,
-              onChanged: widget.onChanged,
-            ),
-          ),
+    return SizedBox(
+      height: _kTimePickerHeaderControlHeight,
+      child: MediaQuery(
+        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
+        child: TextFormField(
+          expands: true,
+          maxLines: null,
+          focusNode: focusNode,
+          textAlign: TextAlign.center,
+          keyboardType: TextInputType.number,
+          style: widget.style.copyWith(color: colorScheme.onSurface),
+          controller: controller,
+          decoration: inputDecoration,
+          validator: widget.validator,
+          onEditingComplete: () => widget.onSavedSubmitted(controller.text),
+          onSaved: widget.onSavedSubmitted,
+          onFieldSubmitted: widget.onSavedSubmitted,
+          onChanged: widget.onChanged,
         ),
-      ],
+      ),
     );
   }
 }

packages/flutter/test/material/time_picker_theme_test.dart

@@ -342,8 +342,8 @@ void main() {
     );
   });
 
-  testWidgets('Time picker uses values from TimePickerThemeData - input mode', (WidgetTester tester) async {
-    final TimePickerThemeData timePickerTheme = _timePickerTheme();
+  testWidgets('Time picker uses values from TimePickerThemeData with InputDecorationTheme - input mode', (WidgetTester tester) async {
+    final TimePickerThemeData timePickerTheme = _timePickerTheme(includeInputDecoration: true);
     final ThemeData theme = ThemeData(timePickerTheme: timePickerTheme);
     await tester.pumpWidget(_TimePickerLauncher(themeData: theme, entryMode: TimePickerEntryMode.input));
     await tester.tap(find.text('X'));
@@ -358,12 +358,23 @@ void main() {
     expect(hourDecoration.focusedErrorBorder, timePickerTheme.inputDecorationTheme.focusedErrorBorder);
     expect(hourDecoration.hintStyle, timePickerTheme.inputDecorationTheme.hintStyle);
   });
+
+  testWidgets('Time picker uses values from TimePickerThemeData without InputDecorationTheme - input mode', (WidgetTester tester) async {
+    final TimePickerThemeData timePickerTheme = _timePickerTheme();
+    final ThemeData theme = ThemeData(timePickerTheme: timePickerTheme);
+    await tester.pumpWidget(_TimePickerLauncher(themeData: theme, entryMode: TimePickerEntryMode.input));
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle(const Duration(seconds: 1));
+
+    final InputDecoration hourDecoration = _textField(tester, '7').decoration;
+    expect(hourDecoration.fillColor, timePickerTheme.hourMinuteColor);
+  });
 }
 
 final Color _selectedColor = Colors.green[100];
 final Color _unselectedColor = Colors.green[200];
 
-TimePickerThemeData _timePickerTheme() {
+TimePickerThemeData _timePickerTheme({bool includeInputDecoration = false}) {
   Color getColor(Set<MaterialState> states) {
     return states.contains(MaterialState.selected) ? _selectedColor : _unselectedColor;
   }
@@ -385,7 +396,7 @@ TimePickerThemeData _timePickerTheme() {
     hourMinuteShape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
     dayPeriodShape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
     dayPeriodBorderSide: const BorderSide(color: Colors.blueAccent),
-    inputDecorationTheme: const InputDecorationTheme(
+    inputDecorationTheme: includeInputDecoration ? const InputDecorationTheme(
       filled: true,
       fillColor: Colors.purple,
       enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
@@ -393,7 +404,7 @@ TimePickerThemeData _timePickerTheme() {
       focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.yellow)),
       focusedErrorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
       hintStyle: TextStyle(fontSize: 8),
-    ),
+    ) : null,
   );
 }