From e0676b47c7550ecdc0f0c4fa759201449b2c5f23 Mon Sep 17 00:00:00 2001 From: Huy Date: Thu, 20 Mar 2025 17:22:23 +0700 Subject: [PATCH] Add `SearchAnchor`.viewOnOpen and `SearchAnchor.bar`.onOpen (#164541) Fix https://github.com/flutter/flutter/issues/160886 From the context of the issue, user wants to observe open/close events for search view with SearchController.isOpen. However, I think that is not a friendly approach/solution due to it relies on a TextEditingController, it is a ValueNotifier which we implicitly understand is dedicated to text input. During the investigation, I found that `viewOnClose` works perfectly because it is a callback from `_SearchViewRoute` (which is a PopupRoute so it has didPush and didPop callbacks that we can leverage). `onClose` was called on `didPop`, so we can solve this by creating a similar `onOpen` then call it on `didPush`. Users then can implement both callbacks for their needs. In this PR: - Propose adding SearchAnchor.viewOnOpen and `SearchAnchor.bar`.onOpen - Improve documentation of SearchController, so that users will not be confused with `SearchController.isOpen` #### Demo (after the fix) https://github.com/user-attachments/assets/7f30b831-e2d7-4a72-bc0f-35c858e3427b ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --------- Signed-off-by: huycozy --- .../lib/src/material/search_anchor.dart | 14 +++ .../test/material/search_anchor_test.dart | 96 +++++++++++++++++++ 2 files changed, 110 insertions(+) diff --git a/packages/flutter/lib/src/material/search_anchor.dart b/packages/flutter/lib/src/material/search_anchor.dart index 5855b5506f..f7f6bc8c30 100644 --- a/packages/flutter/lib/src/material/search_anchor.dart +++ b/packages/flutter/lib/src/material/search_anchor.dart @@ -147,6 +147,7 @@ class SearchAnchor extends StatefulWidget { this.viewOnChanged, this.viewOnSubmitted, this.viewOnClose, + this.viewOnOpen, required this.builder, required this.suggestionsBuilder, this.textInputAction, @@ -173,6 +174,7 @@ class SearchAnchor extends StatefulWidget { ValueChanged? onSubmitted, ValueChanged? onChanged, VoidCallback? onClose, + VoidCallback? onOpen, MaterialStateProperty? barElevation, MaterialStateProperty? barBackgroundColor, MaterialStateProperty? barOverlayColor, @@ -375,6 +377,9 @@ class SearchAnchor extends StatefulWidget { /// Called when the search view is closed. final VoidCallback? viewOnClose; + /// Called when the search view is opened. + final VoidCallback? viewOnOpen; + /// Called to create a widget which can open a search view route when it is tapped. /// /// The widget returned by this builder is faded out when it is tapped. @@ -465,6 +470,7 @@ class _SearchAnchorState extends State { viewOnChanged: widget.viewOnChanged, viewOnSubmitted: widget.viewOnSubmitted, viewOnClose: widget.viewOnClose, + viewOnOpen: widget.viewOnOpen, viewLeading: widget.viewLeading, viewTrailing: widget.viewTrailing, viewHintText: widget.viewHintText, @@ -544,6 +550,7 @@ class _SearchViewRoute extends PopupRoute<_SearchViewRoute> { this.viewOnChanged, this.viewOnSubmitted, this.viewOnClose, + this.viewOnOpen, this.toggleVisibility, this.textDirection, this.viewBuilder, @@ -576,6 +583,7 @@ class _SearchViewRoute extends PopupRoute<_SearchViewRoute> { final ValueChanged? viewOnChanged; final ValueChanged? viewOnSubmitted; final VoidCallback? viewOnClose; + final VoidCallback? viewOnOpen; final ValueGetter? toggleVisibility; final TextDirection? textDirection; final ViewBuilder? viewBuilder; @@ -641,6 +649,7 @@ class _SearchViewRoute extends PopupRoute<_SearchViewRoute> { updateViewConfig(anchorKey.currentContext!); updateTweens(anchorKey.currentContext!); toggleVisibility?.call(); + viewOnOpen?.call(); return super.didPush(); } @@ -1193,6 +1202,7 @@ class _SearchAnchorWithSearchBar extends SearchAnchor { ValueChanged? onChanged, ValueChanged? onSubmitted, VoidCallback? onClose, + VoidCallback? onOpen, required super.suggestionsBuilder, super.textInputAction, super.keyboardType, @@ -1207,6 +1217,7 @@ class _SearchAnchorWithSearchBar extends SearchAnchor { viewOnSubmitted: onSubmitted, viewOnChanged: onChanged, viewOnClose: onClose, + viewOnOpen: onOpen, builder: (BuildContext context, SearchController controller) { return SearchBar( constraints: constraints, @@ -1248,6 +1259,9 @@ class _SearchAnchorWithSearchBar extends SearchAnchor { /// with methods such as [openView] and [closeView]. It can also control the text in the /// input field. /// +/// To observe open/close state changes of search view, provide +/// [SearchAnchor.viewOnOpen] and/or [SearchAnchor.viewOnClose] callbacks. +/// /// See also: /// /// * [SearchAnchor], a widget that defines a region that opens a search view. diff --git a/packages/flutter/test/material/search_anchor_test.dart b/packages/flutter/test/material/search_anchor_test.dart index e20f8e9186..4e7eec9096 100644 --- a/packages/flutter/test/material/search_anchor_test.dart +++ b/packages/flutter/test/material/search_anchor_test.dart @@ -3911,6 +3911,102 @@ void main() { // No exception. }); + + testWidgets('SearchAnchor viewOnOpen is called when the search view is opened', ( + WidgetTester tester, + ) async { + String searchViewState = 'Idle'; + await tester.pumpWidget( + MaterialApp( + home: Material( + child: Center( + child: SearchAnchor( + viewOnClose: () { + searchViewState = 'Closed'; + }, + viewOnOpen: () { + searchViewState = 'Opened'; + }, + builder: (BuildContext context, SearchController controller) { + return IconButton( + icon: const Icon(Icons.search), + onPressed: () { + controller.openView(); + }, + ); + }, + suggestionsBuilder: (BuildContext context, SearchController controller) { + return List.generate(5, (int index) { + final String item = 'item $index'; + return ListTile( + leading: const Icon(Icons.history), + title: Text(item), + trailing: const Icon(Icons.chevron_right), + onTap: () {}, + ); + }); + }, + ), + ), + ), + ), + ); + + expect(find.byIcon(Icons.search), findsOneWidget); + // Open search view. + await tester.tap(find.byIcon(Icons.search)); + await tester.pump(); + expect(searchViewState, 'Opened'); + + // Pop search view route. + await tester.tap(find.backButton()); + await tester.pump(); + expect(searchViewState, 'Closed'); + }); + + testWidgets('SearchAnchor.bar onOpen is called when the search view is opened', ( + WidgetTester tester, + ) async { + String searchViewState = 'Idle'; + await tester.pumpWidget( + MaterialApp( + home: Material( + child: Center( + child: SearchAnchor.bar( + onClose: () { + searchViewState = 'Closed'; + }, + onOpen: () { + searchViewState = 'Opened'; + }, + suggestionsBuilder: (BuildContext context, SearchController controller) { + return List.generate(5, (int index) { + final String item = 'item $index'; + return ListTile( + leading: const Icon(Icons.history), + title: Text(item), + trailing: const Icon(Icons.chevron_right), + onTap: () {}, + ); + }); + }, + ), + ), + ), + ), + ); + + expect(find.byIcon(Icons.search), findsOneWidget); + // Open search view. + await tester.tap(find.byIcon(Icons.search)); + await tester.pump(); + expect(searchViewState, 'Opened'); + + // Pop search view route. + await tester.tap(find.backButton()); + await tester.pump(); + expect(searchViewState, 'Closed'); + }); } Future checkSearchBarDefaults(