feat: add YaruSearchField and YaruSearchTitleField (#734)

* feat: add YaruSearchField and YaruSearchFieldTitle * Separate button from field and add clear icon * add onchanged and docs * Add alignment to title and improve example * Fix issues found in review * rename kYaruTitleBarItemHeight * height and width wording * add radius parameter * Fix example * Limit clear button width and add style * default to filled * forward text, better clip, hide clear btn if empty * Provide focusnode and controller parameters Co-authored-by: J-P Nurmi <[email protected]> * apply suggestions --------- Co-authored-by: J-P Nurmi <[email protected]>
ubuntu · Jul 27, 2023 · 0cc96d8 · 0cc96d8
1 parent dc4b20c
commit 0cc96d8
Show file tree

Hide file tree

Showing 5 changed files with 496 additions and 0 deletions.
diff --git a/example/lib/example_page_items.dart b/example/lib/example_page_items.dart
@@ -21,6 +21,7 @@ import 'pages/page_indicator.dart';
 import 'pages/popup_page.dart';
 import 'pages/progress_indicator_page.dart';
 import 'pages/radio_page.dart';
+import 'pages/search_field_page.dart';
 import 'pages/section_page.dart';
 import 'pages/selectable_container_page.dart';
 import 'pages/switch_page.dart';
@@ -182,6 +183,15 @@ final examplePageItems = <PageItem>[
         ? const Icon(YaruIcons.radiobox_checked_filled)
         : const Icon(YaruIcons.radiobox_checked),
   ),
+  PageItem(
+    title: 'YaruSearchField',
+    snippetUrl:
+        'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/search_field_page.dart',
+    iconBuilder: (context, selected) => selected
+        ? const Icon(YaruIcons.search_filled)
+        : const Icon(YaruIcons.search),
+    pageBuilder: (_) => const SearchFieldPage(),
+  ),
   PageItem(
     title: 'YaruSection',
     snippetUrl:

diff --git a/example/lib/pages/search_field_page.dart b/example/lib/pages/search_field_page.dart
@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class SearchFieldPage extends StatefulWidget {
+  const SearchFieldPage({super.key});
+
+  @override
+  State<SearchFieldPage> createState() => _SearchFieldPageState();
+}
+
+class _SearchFieldPageState extends State<SearchFieldPage> {
+  var _titleSearchActive = false;
+  var _fieldSearchActive = false;
+
+  String _titleText = 'The text you submitted';
+  String _fieldText = 'Or the things you changed';
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final light = theme.brightness == Brightness.light;
+
+    return Center(
+      child: ListView(
+        children: [
+          SimpleDialog(
+            shadowColor: light ? Colors.black : null,
+            titlePadding: EdgeInsets.zero,
+            title: YaruDialogTitleBar(
+              titleSpacing: 0,
+              centerTitle: true,
+              title: YaruSearchTitleField(
+                text: _titleText,
+                onClear: () => setState(() => _titleText = ''),
+                onSubmitted: (value) =>
+                    setState(() => _titleText = value ?? ''),
+                searchActive: _titleSearchActive,
+                onSearchActive: () =>
+                    setState(() => _titleSearchActive = !_titleSearchActive),
+                title: const Text(
+                  'Any Widget Here',
+                ),
+              ),
+            ),
+            children: [
+              SizedBox(
+                height: 300,
+                width: 450,
+                child: Center(
+                  child: Text(
+                    _titleText,
+                  ),
+                ),
+              )
+            ],
+          ),
+          SimpleDialog(
+            shadowColor: light ? Colors.black : null,
+            titlePadding: EdgeInsets.zero,
+            title: YaruDialogTitleBar(
+              heroTag: 'bar2',
+              titleSpacing: 0,
+              centerTitle: true,
+              title: _fieldSearchActive
+                  ? YaruSearchField(
+                      onClear: () {},
+                      onChanged: (value) => setState(
+                        () => _fieldText = value,
+                      ),
+                    )
+                  : const Text('Title'),
+              leading: YaruSearchButton(
+                searchActive: _fieldSearchActive,
+                onPressed: () =>
+                    setState(() => _fieldSearchActive = !_fieldSearchActive),
+              ),
+            ),
+            children: [
+              SizedBox(
+                height: 300,
+                width: 450,
+                child: Center(
+                  child: Text(_fieldText),
+                ),
+              )
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/constants.dart b/lib/constants.dart
@@ -16,3 +16,9 @@ const kYaruButtonRadius = 6.0;
 /// The default breakpoint width [YaruMasterDetailPage] uses for switching
 /// between portrait and landscape modes.
 const kYaruMasterDetailBreakpoint = 620.0;
+
+/// The best height for any item inside a [YaruTitleBar]
+const kYaruTitleBarItemHeight = 35.0;
+
+/// The default icon size
+const kYaruIconSize = 16.0;