Create SearchBar and SearchBarTheme (#122309)

Author: QuncCccccc

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -45,6 +45,7 @@ import 'package:gen_defaults/navigation_rail_template.dart';
 import 'package:gen_defaults/popup_menu_template.dart';
 import 'package:gen_defaults/progress_indicator_template.dart';
 import 'package:gen_defaults/radio_template.dart';
+import 'package:gen_defaults/search_bar_template.dart';
 import 'package:gen_defaults/segmented_button_template.dart';
 import 'package:gen_defaults/slider_template.dart';
 import 'package:gen_defaults/snackbar_template.dart';
@@ -107,6 +108,8 @@ Future<void> main(List<String> args) async {
     'progress_indicator_circular.json',
     'progress_indicator_linear.json',
     'radio_button.json',
+    'search_bar.json',
+    'search_view.json',
     'segmented_button_outlined.json',
     'shape.json',
     'sheet_bottom.json',
@@ -173,6 +176,7 @@ Future<void> main(List<String> args) async {
   PopupMenuTemplate('PopupMenu', '$materialLib/popup_menu.dart', tokens).updateFile();
   ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
   RadioTemplate('Radio<T>', '$materialLib/radio.dart', tokens).updateFile();
+  SearchBarTemplate('SearchBar', '$materialLib/search_anchor.dart', tokens).updateFile();
   SegmentedButtonTemplate('md.comp.outlined-segmented-button', 'SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
   SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
   SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/search_bar_template.dart

@@ -0,0 +1,76 @@
+// 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 SearchBarTemplate extends TokenTemplate {
+  const SearchBarTemplate(super.blockName, super.fileName, super.tokens, {
+    super.colorSchemePrefix = '_colors.',
+    super.textThemePrefix = '_textTheme.'
+  });
+
+  @override
+  String generate() => '''
+class _SearchBarDefaultsM3 extends SearchBarThemeData {
+  _SearchBarDefaultsM3(this.context);
+
+  final BuildContext context;
+  late final ColorScheme _colors = Theme.of(context).colorScheme;
+  late final TextTheme _textTheme = Theme.of(context).textTheme;
+
+  @override
+  MaterialStateProperty<Color?>? get backgroundColor =>
+    MaterialStatePropertyAll<Color>(${componentColor("md.comp.search-bar.container")});
+
+  @override
+  MaterialStateProperty<double>? get elevation =>
+    const MaterialStatePropertyAll<double>(${elevation("md.comp.search-bar.container")});
+
+  @override
+  MaterialStateProperty<Color>? get shadowColor =>
+    MaterialStatePropertyAll<Color>(_colors.shadow);
+
+  @override
+  MaterialStateProperty<Color>? get surfaceTintColor =>
+    MaterialStatePropertyAll<Color>(${colorOrTransparent("md.comp.search-bar.container.surface-tint-layer.color")});
+
+  @override
+  MaterialStateProperty<Color?>? get overlayColor =>
+    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.pressed)) {
+        return ${componentColor("md.comp.search-bar.pressed.state-layer")};
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return ${componentColor("md.comp.search-bar.hover.state-layer")};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${colorOrTransparent("md.comp.search-bar.focused.state-layer")};
+      }
+      return Colors.transparent;
+    });
+
+  // No default side
+
+  @override
+  MaterialStateProperty<OutlinedBorder>? get shape =>
+    const MaterialStatePropertyAll<OutlinedBorder>(${shape('md.comp.search-bar.container', '')});
+
+  @override
+  MaterialStateProperty<EdgeInsetsGeometry>? get padding =>
+    const MaterialStatePropertyAll<EdgeInsetsGeometry>(EdgeInsets.symmetric(horizontal: 8.0));
+
+  @override
+  MaterialStateProperty<TextStyle?> get textStyle =>
+    MaterialStatePropertyAll<TextStyle?>(${textStyleWithColor('md.comp.search-bar.input-text')});
+
+  @override
+  MaterialStateProperty<TextStyle?> get hintStyle =>
+    MaterialStatePropertyAll<TextStyle?>(${textStyleWithColor('md.comp.search-bar.supporting-text')});
+
+  @override
+  BoxConstraints get constraints =>
+    const BoxConstraints(minWidth: 360.0, maxWidth: 800.0, minHeight: ${tokens['md.comp.search-bar.container.height']});
+}
+''';
+}

dev/tools/gen_defaults/lib/template.dart

@@ -236,4 +236,15 @@ abstract class TokenTemplate {
   String textStyle(String componentToken) {
     return '$textThemePrefix${tokens["$componentToken.text-style"]}';
   }
+
+  String textStyleWithColor(String componentToken) {
+    if (!tokens.containsKey('$componentToken.text-style')) {
+      return 'null';
+    }
+    String style = textStyle(componentToken);
+    if (tokens.containsKey('$componentToken.color')) {
+      style = '$style?.copyWith(color: ${componentColor(componentToken)})';
+    }
+    return style;
+  }
 }

packages/flutter/lib/material.dart

@@ -152,6 +152,8 @@ export 'src/material/scaffold.dart';
 export 'src/material/scrollbar.dart';
 export 'src/material/scrollbar_theme.dart';
 export 'src/material/search.dart';
+export 'src/material/search_anchor.dart';
+export 'src/material/search_bar_theme.dart';
 export 'src/material/segmented_button.dart';
 export 'src/material/segmented_button_theme.dart';
 export 'src/material/selectable_text.dart';