smartnsoft / flappy_search_bar Goto Github PK
View Code? Open in Web Editor NEWSearchBar widget to handle most of search cases
License: MIT License
SearchBar widget to handle most of search cases
License: MIT License
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.
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.
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
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:
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;
}
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.
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.
Hi I run example project and every ListTile fill whole page even I give height and width to container.
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.
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.
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?
a small request,, for pagination.
need a event when the scroll meet the bottom..
Got error when search return item.
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
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.
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?
Hi, I could help with this. https://dart.dev/null-safety/migration-guide
I can not know how to show Scrolling indicator like iOS and Android,
I hope add this feather in the next version.
I wnt to make searchable listview but it really confussing how to make it
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!!
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!.
Could you please add snapshot to get an idea about how it looks like?
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?
Right same horizontal height to the left of search bar
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.
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.
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.
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?
I need to set search bar height, how can I achieve it?
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.
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!
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 !
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
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
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 😃
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.
I can do it with a requestFocus()
on the FocusNode
but the SuggestionBox
won't appear anymore.
Thank you for your help and suggestions.
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
Is there in any way we can customise the alignment of the search icon.
Feature request: disable the auto search and only search when the user presses return.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.