Migrate InputDecorator to Material 3 (#107943)

* Support material 3 in inputDecorator

* Format polish

* format polish

* update input_decorator_test

* revert pub

* style update

* style polish

* default before base

* resolve comments

* Update text_field.2.dart

* move text styles into M2 theme

* add error style

* fix typo

* resolve comments

* fix g3 test

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -26,6 +26,7 @@ import 'package:gen_defaults/chip_input_template.dart';
 import 'package:gen_defaults/dialog_template.dart';
 import 'package:gen_defaults/fab_template.dart';
 import 'package:gen_defaults/icon_button_template.dart';
+import 'package:gen_defaults/input_decorator_template.dart';
 import 'package:gen_defaults/navigation_bar_template.dart';
 import 'package:gen_defaults/navigation_rail_template.dart';
 import 'package:gen_defaults/surface_tint.dart';
@@ -111,6 +112,7 @@ Future<void> main(List<String> args) async {
   DialogTemplate('Dialog', '$materialLib/dialog.dart', tokens).updateFile();
   FABTemplate('FAB', '$materialLib/floating_action_button.dart', tokens).updateFile();
   IconButtonTemplate('IconButton', '$materialLib/icon_button.dart', tokens).updateFile();
+  InputDecoratorTemplate('InputDecorator', '$materialLib/input_decorator.dart', tokens).updateFile();
   NavigationBarTemplate('NavigationBar', '$materialLib/navigation_bar.dart', tokens).updateFile();
   NavigationRailTemplate('NavigationRail', '$materialLib/navigation_rail.dart', tokens).updateFile();
   SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/input_decorator_template.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'template.dart';
+
+class InputDecoratorTemplate extends TokenTemplate {
+  const InputDecoratorTemplate(super.blockName, super.fileName, super.tokens, {
+    super.colorSchemePrefix = '_colors.',
+    super.textThemePrefix = '_textTheme.'
+  });
+
+  @override
+  String generate() => '''
+// Generated version ${tokens["version"]}
+class _${blockName}DefaultsM3 extends InputDecorationTheme {
+   _${blockName}DefaultsM3(this.context)
+    : super();
+
+  final BuildContext context;
+
+  late final ColorScheme _colors = Theme.of(context).colorScheme;
+  late final TextTheme _textTheme = Theme.of(context).textTheme;
+
+  @override
+  TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
+    if (states.contains(MaterialState.disabled)) {
+      return TextStyle(color: Theme.of(context).disabledColor);
+    }
+    return TextStyle(color: Theme.of(context).hintColor);
+  });
+
+  @override
+  Color? get fillColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
+    if (states.contains(MaterialState.disabled)) {
+      return ${componentColor("md.comp.filled-text-field.disabled.container")};
+    }
+    return ${componentColor("md.comp.filled-text-field.container")};
+  });
+
+  @override
+  BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.error)) {
+        if (states.contains(MaterialState.hovered)) {
+          return ${border('md.comp.filled-text-field.error.hover.active-indicator')};
+        }
+        if (states.contains(MaterialState.focused)) {
+          return ${border('md.comp.filled-text-field.error.focus.active-indicator')};
+        }
+        return ${border('md.comp.filled-text-field.error.active-indicator')};
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return ${border('md.comp.filled-text-field.hover.active-indicator')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${border('md.comp.filled-text-field.focus.active-indicator')};
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return ${border('md.comp.filled-text-field.disabled.active-indicator')};
+      }
+      return ${border('md.comp.filled-text-field.active-indicator')};
+    });
+
+  @override
+  BorderSide? get outlineBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.error)) {
+        if (states.contains(MaterialState.hovered)) {
+          return ${border('md.comp.outlined-text-field.error.hover.outline')};
+        }
+        if (states.contains(MaterialState.focused)) {
+          return ${border('md.comp.outlined-text-field.error.focus.outline')};
+        }
+        return ${border('md.comp.outlined-text-field.error.outline')};
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return ${border('md.comp.outlined-text-field.hover.outline')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${border('md.comp.outlined-text-field.focus.outline')};
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return ${border('md.comp.outlined-text-field.disabled.outline')};
+      }
+      return ${border('md.comp.outlined-text-field.outline')};
+    });
+
+  @override
+  Color? get iconColor => ${componentColor("md.comp.filled-text-field.leading-icon")};
+
+  @override
+  Color? get prefixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
+    if(states.contains(MaterialState.error)) {
+      if (states.contains(MaterialState.hovered)) {
+        return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${componentColor('md.comp.filled-text-field.error.focus.leading-icon')};
+      }
+      return ${componentColor('md.comp.filled-text-field.error.leading-icon')};
+    }
+    if (states.contains(MaterialState.hovered)) {
+      return ${componentColor('md.comp.filled-text-field.hover.leading-icon')};
+    }
+    if (states.contains(MaterialState.focused)) {
+      return ${componentColor('md.comp.filled-text-field.focus.leading-icon')};
+    }
+    if (states.contains(MaterialState.disabled)) {
+      return ${componentColor('md.comp.filled-text-field.disabled.leading-icon')};
+    }
+    return ${componentColor('md.comp.filled-text-field.leading-icon')};
+  });
+
+  @override
+  Color? get suffixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
+    if(states.contains(MaterialState.error)) {
+      if (states.contains(MaterialState.hovered)) {
+        return ${componentColor('md.comp.filled-text-field.error.hover.trailing-icon')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${componentColor('md.comp.filled-text-field.error.focus.trailing-icon')};
+      }
+      return ${componentColor('md.comp.filled-text-field.error.trailing-icon')};
+    }
+    if (states.contains(MaterialState.hovered)) {
+      return ${componentColor('md.comp.filled-text-field.hover.trailing-icon')};
+    }
+    if (states.contains(MaterialState.focused)) {
+      return ${componentColor('md.comp.filled-text-field.focus.trailing-icon')};
+    }
+    if (states.contains(MaterialState.disabled)) {
+      return ${componentColor('md.comp.filled-text-field.disabled.trailing-icon')};
+    }
+    return ${componentColor('md.comp.filled-text-field.trailing-icon')};
+  });
+
+  @override
+  TextStyle? get labelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
+    final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.label-text")} ?? const TextStyle();
+    if(states.contains(MaterialState.error)) {
+      if (states.contains(MaterialState.hovered)) {
+        return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
+      }
+      if (states.contains(MaterialState.focused)) {
+        return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.label-text')});
+      }
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.label-text')});
+    }
+    if (states.contains(MaterialState.hovered)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
+    }
+    if (states.contains(MaterialState.focused)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.label-text')});
+    }
+    if (states.contains(MaterialState.disabled)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.label-text')});
+    }
+    return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.label-text')});
+  });
+
+  @override
+  TextStyle? get floatingLabelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
+    final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.label-text")} ?? const TextStyle();
+    if(states.contains(MaterialState.error)) {
+      if (states.contains(MaterialState.hovered)) {
+        return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
+      }
+      if (states.contains(MaterialState.focused)) {
+        return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.label-text')});
+      }
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.label-text')});
+    }
+    if (states.contains(MaterialState.hovered)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
+    }
+    if (states.contains(MaterialState.focused)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.label-text')});
+    }
+    if (states.contains(MaterialState.disabled)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.label-text')});
+    }
+    return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.label-text')});
+  });
+
+  @override
+  TextStyle? get helperStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
+    final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();
+    if (states.contains(MaterialState.hovered)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.supporting-text')});
+    }
+    if (states.contains(MaterialState.focused)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.supporting-text')});
+    }
+    if (states.contains(MaterialState.disabled)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.supporting-text')});
+    }
+    return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.supporting-text')});
+  });
+
+  @override
+  TextStyle? get errorStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
+    final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();
+    if (states.contains(MaterialState.hovered)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.supporting-text')});
+    }
+    if (states.contains(MaterialState.focused)) {
+      return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.supporting-text')});
+    }
+    return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.supporting-text')});
+  });
+}
+''';
+}

examples/api/lib/material/text_field/text_field.2.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Flutter code sample for  Material Design 3 TextFields.
+
+import 'package:flutter/material.dart';
+
+void main() { runApp(const TextFieldExamplesApp()); }
+
+class TextFieldExamplesApp extends StatelessWidget {
+  const TextFieldExamplesApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
+      home: Scaffold(
+        appBar: AppBar(title: const Text('TextField Examples')),
+        body: Column(
+          children: const <Widget>[
+            Spacer(),
+            FilledTextFieldExample(),
+            OutlinedTextFieldExample(),
+            Spacer(),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// An example of the filled text field type.
+///
+/// A filled [TextField] with default settings matching the spec:
+/// https://m3.material.io/components/text-fields/specs#6d654d1d-262e-4697-858c-9a75e8e7c81d
+class FilledTextFieldExample extends StatelessWidget {
+  const FilledTextFieldExample({ super.key });
+
+  @override
+  Widget build(BuildContext context) {
+    return const TextField(
+      decoration: InputDecoration(
+        prefixIcon: Icon(Icons.search),
+        suffixIcon: Icon(Icons.clear),
+        labelText: 'Filled',
+        hintText: 'hint text',
+        helperText: 'supporting text',
+        filled: true,
+      )
+    );
+  }
+}
+
+/// An example of the outlined text field type.
+///
+/// A Outlined [TextField] with default settings matching the spec:
+/// https://m3.material.io/components/text-fields/specs#68b00bd6-ab40-4b4f-93d9-ed1fbbc5d06e
+class OutlinedTextFieldExample extends StatelessWidget {
+  const OutlinedTextFieldExample({ super.key });
+
+  @override
+  Widget build(BuildContext context) {
+    return const TextField(
+      decoration: InputDecoration(
+        prefixIcon: Icon(Icons.search),
+        suffixIcon: Icon(Icons.clear),
+        labelText: 'Outlined',
+        hintText: 'hint text',
+        helperText: 'supporting text',
+        border: OutlineInputBorder(),
+      ),
+    );
+  }
+}

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

@@ -1183,6 +1183,7 @@ class ThemeData with Diagnosticable {
   ///   * FAB: [FloatingActionButton]
   ///   * Extended FAB: [FloatingActionButton.extended]
   ///   * Cards: [Card]
+  ///   * TextFields: [TextField] together with its [InputDecoration]
   ///   * Chips:
   ///     - [ActionChip] (used for Assist and Suggestion chips),
   ///     - [FilterChip], [ChoiceChip] (used for single selection filter chips),