Unverified Commit 5180e450 authored by Qun Cheng's avatar Qun Cheng Committed by GitHub

Create `SearchBar` and `SearchBarTheme` (#122309)

parent 7e151b46
...@@ -45,6 +45,7 @@ import 'package:gen_defaults/navigation_rail_template.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/popup_menu_template.dart';
import 'package:gen_defaults/progress_indicator_template.dart'; import 'package:gen_defaults/progress_indicator_template.dart';
import 'package:gen_defaults/radio_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/segmented_button_template.dart';
import 'package:gen_defaults/slider_template.dart'; import 'package:gen_defaults/slider_template.dart';
import 'package:gen_defaults/snackbar_template.dart'; import 'package:gen_defaults/snackbar_template.dart';
...@@ -107,6 +108,8 @@ Future<void> main(List<String> args) async { ...@@ -107,6 +108,8 @@ Future<void> main(List<String> args) async {
'progress_indicator_circular.json', 'progress_indicator_circular.json',
'progress_indicator_linear.json', 'progress_indicator_linear.json',
'radio_button.json', 'radio_button.json',
'search_bar.json',
'search_view.json',
'segmented_button_outlined.json', 'segmented_button_outlined.json',
'shape.json', 'shape.json',
'sheet_bottom.json', 'sheet_bottom.json',
...@@ -173,6 +176,7 @@ Future<void> main(List<String> args) async { ...@@ -173,6 +176,7 @@ Future<void> main(List<String> args) async {
PopupMenuTemplate('PopupMenu', '$materialLib/popup_menu.dart', tokens).updateFile(); PopupMenuTemplate('PopupMenu', '$materialLib/popup_menu.dart', tokens).updateFile();
ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile(); ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
RadioTemplate('Radio<T>', '$materialLib/radio.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(); SegmentedButtonTemplate('md.comp.outlined-segmented-button', 'SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile(); SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile(); SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
......
// 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']});
}
''';
}
...@@ -236,4 +236,15 @@ abstract class TokenTemplate { ...@@ -236,4 +236,15 @@ abstract class TokenTemplate {
String textStyle(String componentToken) { String textStyle(String componentToken) {
return '$textThemePrefix${tokens["$componentToken.text-style"]}'; 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;
}
} }
...@@ -152,6 +152,8 @@ export 'src/material/scaffold.dart'; ...@@ -152,6 +152,8 @@ export 'src/material/scaffold.dart';
export 'src/material/scrollbar.dart'; export 'src/material/scrollbar.dart';
export 'src/material/scrollbar_theme.dart'; export 'src/material/scrollbar_theme.dart';
export 'src/material/search.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.dart';
export 'src/material/segmented_button_theme.dart'; export 'src/material/segmented_button_theme.dart';
export 'src/material/selectable_text.dart'; export 'src/material/selectable_text.dart';
......
This diff is collapsed.
This diff is collapsed.
...@@ -53,6 +53,7 @@ import 'popup_menu_theme.dart'; ...@@ -53,6 +53,7 @@ import 'popup_menu_theme.dart';
import 'progress_indicator_theme.dart'; import 'progress_indicator_theme.dart';
import 'radio_theme.dart'; import 'radio_theme.dart';
import 'scrollbar_theme.dart'; import 'scrollbar_theme.dart';
import 'search_bar_theme.dart';
import 'segmented_button_theme.dart'; import 'segmented_button_theme.dart';
import 'slider_theme.dart'; import 'slider_theme.dart';
import 'snack_bar_theme.dart'; import 'snack_bar_theme.dart';
...@@ -373,6 +374,7 @@ class ThemeData with Diagnosticable { ...@@ -373,6 +374,7 @@ class ThemeData with Diagnosticable {
PopupMenuThemeData? popupMenuTheme, PopupMenuThemeData? popupMenuTheme,
ProgressIndicatorThemeData? progressIndicatorTheme, ProgressIndicatorThemeData? progressIndicatorTheme,
RadioThemeData? radioTheme, RadioThemeData? radioTheme,
SearchBarThemeData? searchBarTheme,
SegmentedButtonThemeData? segmentedButtonTheme, SegmentedButtonThemeData? segmentedButtonTheme,
SliderThemeData? sliderTheme, SliderThemeData? sliderTheme,
SnackBarThemeData? snackBarTheme, SnackBarThemeData? snackBarTheme,
...@@ -589,6 +591,7 @@ class ThemeData with Diagnosticable { ...@@ -589,6 +591,7 @@ class ThemeData with Diagnosticable {
popupMenuTheme ??= const PopupMenuThemeData(); popupMenuTheme ??= const PopupMenuThemeData();
progressIndicatorTheme ??= const ProgressIndicatorThemeData(); progressIndicatorTheme ??= const ProgressIndicatorThemeData();
radioTheme ??= const RadioThemeData(); radioTheme ??= const RadioThemeData();
searchBarTheme ??= const SearchBarThemeData();
segmentedButtonTheme ??= const SegmentedButtonThemeData(); segmentedButtonTheme ??= const SegmentedButtonThemeData();
sliderTheme ??= const SliderThemeData(); sliderTheme ??= const SliderThemeData();
snackBarTheme ??= const SnackBarThemeData(); snackBarTheme ??= const SnackBarThemeData();
...@@ -686,6 +689,7 @@ class ThemeData with Diagnosticable { ...@@ -686,6 +689,7 @@ class ThemeData with Diagnosticable {
popupMenuTheme: popupMenuTheme, popupMenuTheme: popupMenuTheme,
progressIndicatorTheme: progressIndicatorTheme, progressIndicatorTheme: progressIndicatorTheme,
radioTheme: radioTheme, radioTheme: radioTheme,
searchBarTheme: searchBarTheme,
segmentedButtonTheme: segmentedButtonTheme, segmentedButtonTheme: segmentedButtonTheme,
sliderTheme: sliderTheme, sliderTheme: sliderTheme,
snackBarTheme: snackBarTheme, snackBarTheme: snackBarTheme,
...@@ -797,6 +801,7 @@ class ThemeData with Diagnosticable { ...@@ -797,6 +801,7 @@ class ThemeData with Diagnosticable {
required this.popupMenuTheme, required this.popupMenuTheme,
required this.progressIndicatorTheme, required this.progressIndicatorTheme,
required this.radioTheme, required this.radioTheme,
required this.searchBarTheme,
required this.segmentedButtonTheme, required this.segmentedButtonTheme,
required this.sliderTheme, required this.sliderTheme,
required this.snackBarTheme, required this.snackBarTheme,
...@@ -1486,6 +1491,9 @@ class ThemeData with Diagnosticable { ...@@ -1486,6 +1491,9 @@ class ThemeData with Diagnosticable {
/// A theme for customizing the appearance and layout of [Radio] widgets. /// A theme for customizing the appearance and layout of [Radio] widgets.
final RadioThemeData radioTheme; final RadioThemeData radioTheme;
/// A theme for customizing the appearance and layout of [SearchBar] widgets.
final SearchBarThemeData searchBarTheme;
/// A theme for customizing the appearance and layout of [SegmentedButton] widgets. /// A theme for customizing the appearance and layout of [SegmentedButton] widgets.
final SegmentedButtonThemeData segmentedButtonTheme; final SegmentedButtonThemeData segmentedButtonTheme;
...@@ -1697,6 +1705,7 @@ class ThemeData with Diagnosticable { ...@@ -1697,6 +1705,7 @@ class ThemeData with Diagnosticable {
PopupMenuThemeData? popupMenuTheme, PopupMenuThemeData? popupMenuTheme,
ProgressIndicatorThemeData? progressIndicatorTheme, ProgressIndicatorThemeData? progressIndicatorTheme,
RadioThemeData? radioTheme, RadioThemeData? radioTheme,
SearchBarThemeData? searchBarTheme,
SegmentedButtonThemeData? segmentedButtonTheme, SegmentedButtonThemeData? segmentedButtonTheme,
SliderThemeData? sliderTheme, SliderThemeData? sliderTheme,
SnackBarThemeData? snackBarTheme, SnackBarThemeData? snackBarTheme,
...@@ -1831,6 +1840,7 @@ class ThemeData with Diagnosticable { ...@@ -1831,6 +1840,7 @@ class ThemeData with Diagnosticable {
popupMenuTheme: popupMenuTheme ?? this.popupMenuTheme, popupMenuTheme: popupMenuTheme ?? this.popupMenuTheme,
progressIndicatorTheme: progressIndicatorTheme ?? this.progressIndicatorTheme, progressIndicatorTheme: progressIndicatorTheme ?? this.progressIndicatorTheme,
radioTheme: radioTheme ?? this.radioTheme, radioTheme: radioTheme ?? this.radioTheme,
searchBarTheme: searchBarTheme ?? this.searchBarTheme,
segmentedButtonTheme: segmentedButtonTheme ?? this.segmentedButtonTheme, segmentedButtonTheme: segmentedButtonTheme ?? this.segmentedButtonTheme,
sliderTheme: sliderTheme ?? this.sliderTheme, sliderTheme: sliderTheme ?? this.sliderTheme,
snackBarTheme: snackBarTheme ?? this.snackBarTheme, snackBarTheme: snackBarTheme ?? this.snackBarTheme,
...@@ -2025,6 +2035,7 @@ class ThemeData with Diagnosticable { ...@@ -2025,6 +2035,7 @@ class ThemeData with Diagnosticable {
popupMenuTheme: PopupMenuThemeData.lerp(a.popupMenuTheme, b.popupMenuTheme, t)!, popupMenuTheme: PopupMenuThemeData.lerp(a.popupMenuTheme, b.popupMenuTheme, t)!,
progressIndicatorTheme: ProgressIndicatorThemeData.lerp(a.progressIndicatorTheme, b.progressIndicatorTheme, t)!, progressIndicatorTheme: ProgressIndicatorThemeData.lerp(a.progressIndicatorTheme, b.progressIndicatorTheme, t)!,
radioTheme: RadioThemeData.lerp(a.radioTheme, b.radioTheme, t), radioTheme: RadioThemeData.lerp(a.radioTheme, b.radioTheme, t),
searchBarTheme: SearchBarThemeData.lerp(a.searchBarTheme, b.searchBarTheme, t)!,
segmentedButtonTheme: SegmentedButtonThemeData.lerp(a.segmentedButtonTheme, b.segmentedButtonTheme, t), segmentedButtonTheme: SegmentedButtonThemeData.lerp(a.segmentedButtonTheme, b.segmentedButtonTheme, t),
sliderTheme: SliderThemeData.lerp(a.sliderTheme, b.sliderTheme, t), sliderTheme: SliderThemeData.lerp(a.sliderTheme, b.sliderTheme, t),
snackBarTheme: SnackBarThemeData.lerp(a.snackBarTheme, b.snackBarTheme, t), snackBarTheme: SnackBarThemeData.lerp(a.snackBarTheme, b.snackBarTheme, t),
...@@ -2131,6 +2142,7 @@ class ThemeData with Diagnosticable { ...@@ -2131,6 +2142,7 @@ class ThemeData with Diagnosticable {
other.popupMenuTheme == popupMenuTheme && other.popupMenuTheme == popupMenuTheme &&
other.progressIndicatorTheme == progressIndicatorTheme && other.progressIndicatorTheme == progressIndicatorTheme &&
other.radioTheme == radioTheme && other.radioTheme == radioTheme &&
other.searchBarTheme == searchBarTheme &&
other.segmentedButtonTheme == segmentedButtonTheme && other.segmentedButtonTheme == segmentedButtonTheme &&
other.sliderTheme == sliderTheme && other.sliderTheme == sliderTheme &&
other.snackBarTheme == snackBarTheme && other.snackBarTheme == snackBarTheme &&
...@@ -2234,6 +2246,7 @@ class ThemeData with Diagnosticable { ...@@ -2234,6 +2246,7 @@ class ThemeData with Diagnosticable {
popupMenuTheme, popupMenuTheme,
progressIndicatorTheme, progressIndicatorTheme,
radioTheme, radioTheme,
searchBarTheme,
segmentedButtonTheme, segmentedButtonTheme,
sliderTheme, sliderTheme,
snackBarTheme, snackBarTheme,
...@@ -2339,6 +2352,7 @@ class ThemeData with Diagnosticable { ...@@ -2339,6 +2352,7 @@ class ThemeData with Diagnosticable {
properties.add(DiagnosticsProperty<PopupMenuThemeData>('popupMenuTheme', popupMenuTheme, defaultValue: defaultData.popupMenuTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<PopupMenuThemeData>('popupMenuTheme', popupMenuTheme, defaultValue: defaultData.popupMenuTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<ProgressIndicatorThemeData>('progressIndicatorTheme', progressIndicatorTheme, defaultValue: defaultData.progressIndicatorTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<ProgressIndicatorThemeData>('progressIndicatorTheme', progressIndicatorTheme, defaultValue: defaultData.progressIndicatorTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<RadioThemeData>('radioTheme', radioTheme, defaultValue: defaultData.radioTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<RadioThemeData>('radioTheme', radioTheme, defaultValue: defaultData.radioTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<SearchBarThemeData>('searchBarTheme', searchBarTheme, defaultValue: defaultData.searchBarTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<SegmentedButtonThemeData>('segmentedButtonTheme', segmentedButtonTheme, defaultValue: defaultData.segmentedButtonTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<SegmentedButtonThemeData>('segmentedButtonTheme', segmentedButtonTheme, defaultValue: defaultData.segmentedButtonTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<SliderThemeData>('sliderTheme', sliderTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<SliderThemeData>('sliderTheme', sliderTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<SnackBarThemeData>('snackBarTheme', snackBarTheme, defaultValue: defaultData.snackBarTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<SnackBarThemeData>('snackBarTheme', snackBarTheme, defaultValue: defaultData.snackBarTheme, level: DiagnosticLevel.debug));
......
This diff is collapsed.
This diff is collapsed.
...@@ -791,6 +791,7 @@ void main() { ...@@ -791,6 +791,7 @@ void main() {
popupMenuTheme: const PopupMenuThemeData(color: Colors.black), popupMenuTheme: const PopupMenuThemeData(color: Colors.black),
progressIndicatorTheme: const ProgressIndicatorThemeData(), progressIndicatorTheme: const ProgressIndicatorThemeData(),
radioTheme: const RadioThemeData(), radioTheme: const RadioThemeData(),
searchBarTheme: const SearchBarThemeData(),
segmentedButtonTheme: const SegmentedButtonThemeData(), segmentedButtonTheme: const SegmentedButtonThemeData(),
sliderTheme: sliderTheme, sliderTheme: sliderTheme,
snackBarTheme: const SnackBarThemeData(backgroundColor: Colors.black), snackBarTheme: const SnackBarThemeData(backgroundColor: Colors.black),
...@@ -909,6 +910,7 @@ void main() { ...@@ -909,6 +910,7 @@ void main() {
popupMenuTheme: const PopupMenuThemeData(color: Colors.white), popupMenuTheme: const PopupMenuThemeData(color: Colors.white),
progressIndicatorTheme: const ProgressIndicatorThemeData(), progressIndicatorTheme: const ProgressIndicatorThemeData(),
radioTheme: const RadioThemeData(), radioTheme: const RadioThemeData(),
searchBarTheme: const SearchBarThemeData(),
segmentedButtonTheme: const SegmentedButtonThemeData(), segmentedButtonTheme: const SegmentedButtonThemeData(),
sliderTheme: otherSliderTheme, sliderTheme: otherSliderTheme,
snackBarTheme: const SnackBarThemeData(backgroundColor: Colors.white), snackBarTheme: const SnackBarThemeData(backgroundColor: Colors.white),
...@@ -1012,6 +1014,7 @@ void main() { ...@@ -1012,6 +1014,7 @@ void main() {
popupMenuTheme: otherTheme.popupMenuTheme, popupMenuTheme: otherTheme.popupMenuTheme,
progressIndicatorTheme: otherTheme.progressIndicatorTheme, progressIndicatorTheme: otherTheme.progressIndicatorTheme,
radioTheme: otherTheme.radioTheme, radioTheme: otherTheme.radioTheme,
searchBarTheme: otherTheme.searchBarTheme,
sliderTheme: otherTheme.sliderTheme, sliderTheme: otherTheme.sliderTheme,
snackBarTheme: otherTheme.snackBarTheme, snackBarTheme: otherTheme.snackBarTheme,
switchTheme: otherTheme.switchTheme, switchTheme: otherTheme.switchTheme,
...@@ -1112,6 +1115,7 @@ void main() { ...@@ -1112,6 +1115,7 @@ void main() {
expect(themeDataCopy.popupMenuTheme, equals(otherTheme.popupMenuTheme)); expect(themeDataCopy.popupMenuTheme, equals(otherTheme.popupMenuTheme));
expect(themeDataCopy.progressIndicatorTheme, equals(otherTheme.progressIndicatorTheme)); expect(themeDataCopy.progressIndicatorTheme, equals(otherTheme.progressIndicatorTheme));
expect(themeDataCopy.radioTheme, equals(otherTheme.radioTheme)); expect(themeDataCopy.radioTheme, equals(otherTheme.radioTheme));
expect(themeDataCopy.searchBarTheme, equals(otherTheme.searchBarTheme));
expect(themeDataCopy.sliderTheme, equals(otherTheme.sliderTheme)); expect(themeDataCopy.sliderTheme, equals(otherTheme.sliderTheme));
expect(themeDataCopy.snackBarTheme, equals(otherTheme.snackBarTheme)); expect(themeDataCopy.snackBarTheme, equals(otherTheme.snackBarTheme));
expect(themeDataCopy.switchTheme, equals(otherTheme.switchTheme)); expect(themeDataCopy.switchTheme, equals(otherTheme.switchTheme));
...@@ -1249,6 +1253,7 @@ void main() { ...@@ -1249,6 +1253,7 @@ void main() {
'popupMenuTheme', 'popupMenuTheme',
'progressIndicatorTheme', 'progressIndicatorTheme',
'radioTheme', 'radioTheme',
'searchBarTheme',
'segmentedButtonTheme', 'segmentedButtonTheme',
'sliderTheme', 'sliderTheme',
'snackBarTheme', 'snackBarTheme',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment