smartnsoft / flappy_search_bar Goto Github PK

Hello, i want to clear the search word (text editing controller) and clear the result list, when i tap on a result from that list (reset the searchBar).
Is there any way to implement this?

Thanks!

Use case - Need to show keyboard automatically, when moved to the search bar.
Current implementation - Now, we need to focus the search text field manually.
Expected - Need to focus the text filed while moving to the search bar.

autofocus: true does the job on the TextField (Search bar).

It could be useful if you expose the TextFiled properties or a toggle callback for autofocus thing.
Thanks in advance.

Hey! it's a wonderful widget and very easy to use. I was wondering whether it is possible to add a mechanism where onSearch named parameter would trigger automatically.
For eg: if there are some cards beneath the search bar (as pre-existing suggestions) and whenever a user taps on a card, onSearch method can be called and a particular string can be sent to search() function and we can get some result if found for that particular String
Cheers!.

I noticed that when focusing in the search bar or moving the cursor into the typed string and back to the start the cursor will jump or change position

It’s really slight but it’s noticeable. Does anyone know how to fix it?

Getting error while using in Column.
Error Log:
I/flutter ( 3527): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3527): The following assertion was thrown during performLayout():
I/flutter ( 3527): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 3527): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 3527): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 3527): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 3527): space in the vertical direction.
I/flutter ( 3527): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 3527): cannot simultaneously expand to fit its parent.
I/flutter ( 3527): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 3527): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 3527): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 3527): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 3527): constraints provided by the parent.
I/flutter ( 3527): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 3527): https://flutter.dev/debugging/#rendering-layer
I/flutter ( 3527): http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 3527): The affected RenderFlex is:
I/flutter ( 3527): RenderFlex#50a43 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← SearchBar ← Padding ← Container ← MySearchBar ← Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← ⋯, parentData: offset=Offset(0.0, 0.0) (can use size), constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: start, textDirection: ltr, verticalDirection: down)
I/flutter ( 3527): The creator information is set to:
I/flutter ( 3527): Column ← SearchBar ← Padding ← Container ← MySearchBar ← Column ← _BodyBuilder ← MediaQuery

I/flutter ( 3527): Column ← SearchBar ← Padding ← Container ← MySearchBar ← Column ← _BodyBuilder ← MediaQuery
I/flutter ( 3527): ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
I/flutter ( 3527): ⋯
I/flutter ( 3527): The nearest ancestor providing an unbounded width constraint is: RenderFlex#e54e5 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter ( 3527): creator: Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
I/flutter ( 3527): CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter ( 3527): _InkFeatures-[GlobalKey#2d979 ink renderer] ← NotificationListener ←
I/flutter ( 3527): PhysicalModel ← AnimatedPhysicalModel ← ⋯
I/flutter ( 3527): parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
I/flutter ( 3527): constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=843.4)
I/flutter ( 3527): size: MISSING
I/flutter ( 3527): direction: vertical
I/flutter ( 3527): mainAxisAlignment: start
I/flutter ( 3527): mainAxisSize: max
I/flutter ( 3527): crossAxisAlignment: center
I/flutter ( 3527): verticalDirection: down
I/flutter ( 3527): See also: https://flutter.dev/layout/
I/flutter ( 3527): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter ( 3527): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 3527):
I/flutter ( 3527): The relevant error-causing widget was:
I/flutter ( 3527): Column
I/flutter ( 3527):
..\…\lib\flappy_search_bar.dart:330
I/flutter ( 3527):
I/flutter ( 3527): When the exception was thrown, this was the stack:
I/flutter ( 3527): #0 RenderFlex.performLayout.
package:flutter/…/rendering/flex.dart:693
I/flutter ( 3527): #1 RenderFlex.performLayout

I/flutter ( 3527): The following RenderObject was being processed when the exception was fired: RenderFlex#50a43 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter ( 3527): creator: Column ← SearchBar ← Padding ← Container ← MySearchBar ← Column ← _BodyBuilder ←
I/flutter ( 3527): MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ←
I/flutter ( 3527): DefaultTextStyle ← ⋯
I/flutter ( 3527): parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter ( 3527): constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=Infinity)
I/flutter ( 3527): size: MISSING
I/flutter ( 3527): direction: vertical
I/flutter ( 3527): mainAxisAlignment: start
I/flutter ( 3527): mainAxisSize: max
I/flutter ( 3527): crossAxisAlignment: start
I/flutter ( 3527): textDirection: ltr
I/flutter ( 3527): verticalDirection: down
I/flutter ( 3527): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 3527): child 1: RenderPadding#aae4d relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderConstrainedBox#846be relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderFlex#f2dfa relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

I/flutter ( 3527): child: RenderDecoratedBox#ed770 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child 2: RenderSemanticsGestureHandler#7eb3b relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderPointerListener#79446 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child 2: RenderPadding#078d8 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderLimitedBox#a0b39 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderConstrainedBox#18794 relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 3527): child 3: RenderPadding#14964 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderRepaintBoundary#0e907 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderCustomPaint#47d7e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: RenderRepaintBoundary#65e49 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): child: _RenderScrollSemantics#be84d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 3527): Another exception was thrown: RenderBox was not laid out: RenderFlex#50a43 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): Another exception was thrown: RenderBox was not laid out: RenderPadding#3b209 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): Another exception was thrown: RenderBox was not laid out: RenderFlex#e54e5 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 3527): Another exception was thrown: NoSuchMethodError: The method '>' was called on null.
I/Choreographer( 3527): Skipped 30 frames! The application may be doing too much work on its main thread.

I was wondering if you'd be able to expose a way for people to react to a tap event on the Cancel button that animates in after performing a search? I have a screen on which this would be REALLY useful. Awesome plugin by the way!!

Thanks
Scott

How can we clear and remove focus from the search bar once an item is clicked?

Implementation of TextEditingController would be great. With the help of a possible SearchBarController.search() function, we can execute search function from outside of the SearchBar widget.

How to create a dynamic search suggestion by the typed text on the flappy search bar ?
i've read inside the flappy-search_bart.dart code,
there's only a static search suggestion,

i need to get typed text on search bar to create a dynamic search suggestion

please tell me the way

I'm trying to add a barcode scanner into the search screen your package provided using placeholder property to add the scan barcode button but after I get the result from the scanned barcode I can not inject it into the search bar.

Is it possible to enhance the option of searchBarStyle? Because at the moment, it only enable people to change the background color, padding, border radius, which is not enough to have a better UI.

Special thanks for providing this package.

I have a question about the package:
"Is it possible to use this package to load more data when it's required?".
Because, it's a common situation that you want to load more data from server on user demand by paginating results, specially when you have a huge amount of data. I think one simple solution for providing this feature is to define a method that return the list of items (response of future method) and so in this case there is no need to use the OnItemFound method. This option give us more flexibility for writing our logic.

Thanks in advance.

Welcome I've run into issue related to setting background for the list of the found items.
In the state without the input in the placeholder I've this design you can see at the 1 photo.
But I can't find the way to make the same black background for the whole scrollable space. Here is the second image for reference. Wish you can tell me the way around the problem.
1.

2.

Hi,

I have a search button top of my view which has other widget and i noticed the search results dont seem quite right

thanks for the great package, is possible to show full list by default when no search value? It will be great if supported this option.

Could you please add snapshot to get an idea about how it looks like?

Hello,

Very very very good work !

A very small request. Could you add support for dark theme?
For the moment the font color is black on black background.
Maybe use default theme text style ?

Thank you !

Hi,

In my search at I find several elements, but itemFound shows only the first one on the list.
Could help?

thanks

Future<List<Empregado>> _getALlPosts(String text) async {
    List<Empregado> list = empregados
        .where((element) =>
            element.name.toUpperCase().contains(text.toUpperCase()))
        .toList();
    print("employees quantity ${list.length}");
    return list;
  }

Hey there,

I am implementing the Flappy Search Bar as a new screen in my, which appears when a user clicks on a search button somewhere else in my app. Therefore it would be quite useful if autofocus would be supported as it is in the Flutter TextField class for example. As for now the user needs to click in the Searchbar again to open the keyboard. I havent found a property which looks like the one I need.

Thank you very much!
Daniel

I wnt to make searchable listview but it really confussing how to make it

A small request.
Will like to add a back button at the left side of search bar.
Hope you could add a leftchild parameter for this.
Thanks 😃

Hi There,
I have a question, is anyway for me to do the pagination for the search results ? if the result comes for a large amount results.
Thanks for the reply.

when build app this error appear: No named parameter with the name 'restorationId'
Full:
/Pub/Cache/hosted/pub.dartlang.org/pub_cache-0.2.3/hosted/pub.dev/flutter_staggered_grid_view-0.3.3/lib/src/widgets/staggered_grid_view.dart:425:11: Error: No named parameter with the name 'restorationId'.
restorationId: restorationId,

this error appear after new update of package flutter_staggered_grid_view to 0.3.3
Add support for state restoration.

To temporarily solve this problem I added the following in pubspec.yaml file
dependency_overrides:
flutter_staggered_grid_view: 0.3.2

DO NOT ADD ^ to lib version number

Hello,

First I wanted to say that this package is pretty cool, good job and thank you for making it !

I was wondering if it is actually possible to display a particular widget when the user tap on the "validation button" of his keyboard. I double checked the documentation but I didn't find anything. I'm sorry if I missed something.

Thank you in advance for your answer.

hello,
is it possible to use Dismissable widget as searched result?
I have error with: A dismissed Dismissible widget is still part of the tree.

Hi I run example project and every ListTile fill whole page even I give height and width to container.

Hello everyone, I'm not sure if this is the right place to ask this question. I have tried to google any way to implement searching data from Firestore using Firestore and StreamProvider. Yet, not much info is found.

I have a future for onsearch and a streamprovider listening the data from firestore. How can i combine these two?

Much appreciate if someone can shed some light on this!!

a small request,, for pagination.
need a event when the scroll meet the bottom..

Right same horizontal height to the left of search bar

I think if you put ui screenshots or gifs, it would be better so that I can see how it works before adding to my project.

Got error when search return item.

I can not know how to show Scrolling indicator like iOS and Android,
I hope add this feather in the next version.

I can do it with a requestFocus() on the FocusNode but the SuggestionBox won't appear anymore.
Thank you for your help and suggestions.

I am facing issue in clearing the search text. I have a requirement to clear the previously searched text when user wants to search for the second time. Could you please help me to achieve this functionality?

I need to set search bar height, how can I achieve it?

The emptyState should be when there are no items in the suggestions, i.e. - a true empty state. Then there should be a separate noResults widget for when the search returns no results.

iwant to use parameter indexedScaledTileBuilder in flappy search bar, but its return an error "The argument for the named parameter 'indexedScaledTileBuilder' was already specified."

please fix it

I have been trying to use this is the appbar but every time I do it just ends up blank like:

m getting this error when I use spaces in search
it works fine for single word

E/flutter (13594): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type '_Exception' is not a subtype of type 'Error' E/flutter (13594): #0 SearchBarController._search (package:flappy_search_bar/flappy_search_bar.dart:55:36) E/flutter (13594): <asynchronous suspension> E/flutter (13594): #1 _SearchBarState._onTextChanged.<anonymous closure> (package:flappy_search_bar/flappy_search_bar.dart:271:29) E/flutter (13594): #2 _rootRun (dart:async/zone.dart:1122:38) E/flutter (13594): #3 _CustomZone.run (dart:async/zone.dart:1023:19) E/flutter (13594): #4 _CustomZone.runGuarded (dart:async/zone.dart:925:7) E/flutter (13594): #5 _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:965:23) E/flutter (13594): #6 _rootRun (dart:async/zone.dart:1126:13) E/flutter (13594): #7 _CustomZone.run (dart:async/zone.dart:1023:19) E/flutter (13594): #8 _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:949:23) E/flutter (13594): #9 Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:23:15) E/flutter (13594): #10 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:384:19) E/flutter (13594): #11 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:418:5) E/flutter (13594): #12 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174:12) E/flutter (13594):

can you please help me fix it?

An error seems to keep being returned despite returning a valid Future<List<T>> type in the onSearch method

I/flutter (12750): ‼️ SEVERE 2021-06-05 11:22:36.333049 [caller info not available] #0      SearchBarController._search (**package:flappy_search_bar_ns/flappy_search_bar_ns.dart:63:46**)
I/flutter (12750): #1      _SearchBarState._onTextChanged.<anonymous closure> (package:flappy_search_bar_ns/flappy_search_bar_ns.dart:314:29)
I/flutter (12750): #2      _SearchBarState._onTextChanged.<anonymous closure> (package:flappy_search_bar_ns/flappy_search_bar_ns.dart:312:48)
I/flutter (12750): #3      _rootRun (dart:async/zone.dart:1346:47)
I/flutter (12750): #4      _CustomZone.run (dart:async/zone.dart:1258:19)
I/flutter (12750): #5      _CustomZone.runGuarded (dart:async/zone.dart:1162:7)
I/flutter (12750): #6      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1202:23)
I/flutter (12750): #7      _rootRun (dart:async/zone.dart:1354:13)
I/flutter (12750): #8      _CustomZone.run (dart:async/zone.dart:1258:19)
I/flutter (12750): #9      _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:1186:23)
I/flutter (12750): #10     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15)
I/flutter (12750): #11     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19)
I/flutter (12750): #12     

Hi, I could help with this. https://dart.dev/null-safety/migration-guide

Is there in any way we can customise the alignment of the search icon.

This plugin is very similar to the search box on the google photos page.
But I'm not sure why we don't have a property to charge the initial Data. So the present data since the beginning and then perform some search on that initial Data.

Feature request: disable the auto search and only search when the user presses return.

My widget tree looks like this:

Stack(
  children: <Widget> [
   // ...
    Positioned.fill(
      // draws a box with padding at the top and bottom of the screen (see screenshot)
      child: LayoutBuilder(
        builder(context, constraints) => Column(
          children: <Widget> [
            // ... other stuff
            SizedBox(
              height: constraints.maxHeight - sizeOfOtherStuffAbove
              child: SearchBar<ContactModel>(
                onSearch: (query) => model.search(query),
                onItemFound: (contact, _) => ContactListItem(contact: contact,),
                buildSuggestion: (contact, _) => ContactListItem(contact: contact,),),)

When the suggestions load they looks like this and scroll correctly at first:

But then when scrolling it looks like this:

Cant remove top padding.
All paddings are 0
MediaQuery.removePadding not helping
//Edit: seems like thats all about fixed height in search bar sources