Andrew and Matt coding are me when I'm coding, except it's just the voices in my head. 😂Useful vid! Ended up implementing my search bar a little differently due to my data structure but cool to see your process!
I am interested in two topic: Flutter Internationalizing and maps support for flutter, ooh and one more thing, Persisting ui state would be a good one too
The maps plugin is being built out at github.com/flutter/plugins, and there's a guide for internationalization at flutter.io/docs/development/accessibility-and-localization/internationalization.
4:39 The outer light circle effect for the search button during clicking looked not perfect, how could this be fixed? Can't the effect float above the app bar? Currently, it is cut at the app bar boundary.
Great presentation! Congrats guys. I have a question. If on each article in the result the onTap lead to a new page(navigator push) how can you avoir reloading the search on back from the new route?
When I refer to flutter.io i many times get confused because for a new framework and on top of that beginners like me , it becomes to difficult to understand just by definition and parameters please provide small small examples of code too. There are examples there but for specific things only but I think they should cover each possible part.
Hello Please make a video on search in flutter app on different firestore collection For eg there are three categories of vehical light , heavy , medium and have different collection in firebase And how to search throughout the app (search any category in home page )
We don't have a full tutorial yet, but the plugin is in development at github.com/flutter/plugins, and we've got a sample up at github.com/flutter/samples.
If I filled the suggestions list with restults from my db through http call, what would be a good practice to filter the results/avoid loading big amount of data? Specifically, I want to use this mechanism with this (flutter_map) map plugin (still praying for an official one). What would be the best to optimize such situation?
The maps plugin is in progress right now at: github.com/flutter/plugins/tree/master/packages/google_maps_flutter. There's a sample currently landing in the flutter/samples repo as well! For your first question, though, you could try adding an HTTP call to your backend specifically for generating suggestions and then just send back a couple that are displayed in a FutureBuilder or StreamBuilder, or base your suggestions on data that you've already got loaded (like past searches by that user). The SearchDelegate interface is pretty basic (you're just returning widgets, after all), so there's a lot that you can do.
Question: how would you make a search field to be clicked instead of an iconbutton, have an animated transition to the searchdelegate back and forth as well as show the searched word in the searched field afterwards?
good tutorial, in my case I have 2 registrations of different type. the first is a registration of the product in green I used card and the second purchase I have registered in gray, I would like to do the research to have the same rendering. But not coming. I used a switch like when recording but I always have errors.
thx for the tutorial, may I ask showSearch will raise a [Navigator operation requested with a context that does not include a Navigator.] how to fix it?
Sir i want to perform a search by two field in each documents in firestore in flutter on only one text field Eg field 1 is code or field 2 is name Means to say person can search either by code or name
I am trying it on Flutter Web. While development, I am debugging it on Chrome browser, so I need to hit enter after typing in the search bar and everything works as expected. But when I deploy it on Firebase Hosting and open it on mobile browser, the Enter key of the mobile soft key pad is sometime showing result and other time (most of the time) doing nothing, as if no one pressed the enter button. Any suggestion?
after using your code I saw a error when I used space after any alphabet/ word. Although I solved this error. But can not solved the upper case problem.
Somewhere just after 18:20 Matt says why dont you use a FutureBuilder. Ive tried to make an app that takes data (json) from a rest service using http.get. And i wished to add search functionality. I did what you show us on the video but i am using futerBuilder (i've google it) at the body of the widget instead of Stream
I'm following this very beautiful and usefull course. But I have a big problem with this lesson. Can you help me? I have the last version installed. When I create the class ArticleSearch, I need to override all the methods, or it will not work. I don't made any other changes respect your code, and it works, when I start debug, but when I press the search icon on the listview, I recieve the following error: I/flutter (28595): The following NoSuchMethodError was thrown while handling a gesture: I/flutter (28595): The setter 'parent=' was called on null. I/flutter (28595): Receiver: null I/flutter (28595): Tried calling: parent=Instance of 'AnimationController' I/flutter (28595): I/flutter (28595): When the exception was thrown, this was the stack: I/flutter (28595): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5) I/flutter (28595): #1 _SearchPageRoute.createAnimation (package:flutter/src/material/search.dart:362:30) I/flutter (28595): #2 TransitionRoute.install (package:flutter/src/widgets/routes.dart:193:18) I/flutter (28595): #3 ModalRoute.install (package:flutter/src/widgets/routes.dart:1053:11) I/flutter (28595): #4 _RouteEntry.handlePush (package:flutter/src/widgets/navigator.dart:2326:11) I/flutter (28595): #5 NavigatorState._flushHistoryUpdates (package:flutter/src/widgets/navigator.dart:2973:17) I/flutter (28595): #6 NavigatorState.push (package:flutter/src/widgets/navigator.dart:3297:5) I/flutter (28595): #7 showSearch (package:flutter/src/material/search.dart:60:32) I/flutter (28595): #8 _MyHomePageState.build. (package:hn_app/main.dart:77:15) I/flutter (28595): #9 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:779:19) I/flutter (28595): #10 _InkResponseState.build. (package:flutter/src/material/ink_well.dart:862:36) I/flutter (28595): #11 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) I/flutter (28595): #12 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:504:11) I/flutter (28595): #13 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:282:5) I/flutter (28595): #14 BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:217:7) I/flutter (28595): #15 PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:475:9) I/flutter (28595): #16 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:76:12) I/flutter (28595): #17 PointerRouter._dispatchEventToRoutes. (package:flutter/src/gestures/pointer_router.dart:122:9) I/flutter (28595): #18 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:379:8) I/flutter (28595): #19 PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:120:18) I/flutter (28595): #20 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:106:7) I/flutter (28595): #21 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19) I/flutter (28595): #22 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22) I/flutter (28595): #23 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7) I/flutter (28595): #24 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7) I/flutter (28595): #25 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7) I/flutter (28595): #29 _invoke1 (dart:ui/hooks.dart:275:10) I/flutter (28595): #30 _dispatchPointerDataPacket (dart:ui/hooks.dart:184:5) I/flutter (28595): (elided 3 frames from dart:async) I/flutter (28595): I/flutter (28595): Handler: "onTap" I/flutter (28595): Recognizer: I/flutter (28595): TapGestureRecognizer#6a252 I/flutter (28595): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter (28595): Another exception was thrown: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 3289 pos 12: '!_debugLocked': is not true.
You're always welcome to post them here or tweet things at us. To be honest, we can often give better answers if we have a chance to think about the question and do a little research. :)
The status bar reappears when keyboard is opened on Android , not sure if this a bug but I faced this in 2 to 3 devices of Android, anybody experienced the same??
I wanted to add a realtime chatting feature to an app I'm currently working on. I really have lots of ideas, one of them is using TCP sockets but I think it won't be secure or that I will have to write additional code to make it secure. One of the constraints I'm facing is that I'm using a RESTful HTTP API for the rest of the app, and we cannot afford saving messages into firebase. Any idea of how we can do this?
Hmm. This is probably more of a backend question than a Flutter question, since the app would mostly just act as a client that sends/receives things via a server. You could certainly build a REST-based HTTP service that your Flutter app uses to send and long-poll for messages. I imagine that would be simpler than trying to maintain an encrypted TCP connection on a mobile device, though Flutter supports raw, socket-level network communication.
I think I've found a bug in Flutters search view. If you navigate away from the search view using Navigator.push and then back to it using the back button, you cannot enter text into the search box.
Interesting! Can you drop the code you caught this with into a GitHub gist or some other place where I could get at it? I'd love to verify and file an issue. You're also welcome to file an issue directly, of course: github.com/flutter/flutter/issues.
For many input widgets (TextField, for example) you can provide an InputDecoration of your own in the constructor (try using Theme.of to grab the current one, and then modify it using copyWith).
I'm using SearchDelegate with Mobx, but I'm with an issue: when I close the search page and set the return value on the initial form the screen doesn't not update. The new value is there, because if I save the form, the new value is updated in the storage, mas the screen does not refresh. Anyone can help me? (Mobx with SearchDelegate)
Great presentation! Congrats guys. I have a question. If on each article in the result the onTap lead to a new page(navigator push) how can you avoir reloading the search on back from the new route?
This stuff is awesome, straight from the people who made it, and to see them making mistakes and learning on the way gives me a lot of confidence.
Andrew and Matt coding are me when I'm coding, except it's just the voices in my head. 😂Useful vid! Ended up implementing my search bar a little differently due to my data structure but cool to see your process!
I saw that red screen for a minute too, Andrew. 😂
A minute is too much.
@@me-05-souvikduttachowdhury93 a millisecond? XD
this tutorial + mood lighting + jazz = so relaxing waow
Very usefull topic. I just added search feature in my app.
I love the show 🔥.
It's more like relax, enjoy and learn💻👓
This video give me the clearer idea for Search Delegate, thanks for the sharing.
Do we have source code for the show?
I am interested in two topic: Flutter Internationalizing and maps support for flutter, ooh and one more thing, Persisting ui state would be a good one too
The maps plugin is being built out at github.com/flutter/plugins, and there's a guide for internationalization at flutter.io/docs/development/accessibility-and-localization/internationalization.
Thank you Andrew and Matt!! This really helped to clear up a lot of things for me.
Flutter have a lot of things to help us to build app fast!!!!
Awesome episode guys ... Got some search to implement
This is the tutorial that I search! Can study about search function & Builder. Thank you~
4:39 The outer light circle effect for the search button during clicking looked not perfect, how could this be fixed? Can't the effect float above the app bar? Currently, it is cut at the app bar boundary.
This was a really helpful video!! Thank you guys
you guys have saved by day today
thanks :)
Why's Matt always wearing a beanie? Love these videos, please please keep them coming!!!
Great presentation! Congrats guys. I have a question. If on each article in the result the onTap lead to a new page(navigator push) how can you avoir reloading the search on back from the new route?
Thank you for tutorial :)
This one was pretty interesting boring show
Excellent channel.
i love this show !!
It's fairly simple API.
Video length: 57:00
The reason why it didn't show you the suggestions after tapping one is because you didnt lowercase the query :)
Matt eventually caught it. Took about a half hour. :)
@Andrew Brogdon I watched the whole episode in deep pain waiting for you to add the missing lowercasing 😂
So you're saying that if I make an egregious mistake early in the episode, it keeps the audience hooked until the end. Interesting... interesting... 😂
When I refer to flutter.io i many times get confused because for a new framework and on top of that beginners like me , it becomes to difficult to understand just by definition and parameters please provide small small examples of code too. There are examples there but for specific things only but I think they should cover each possible part.
YES!!!
Could you guys get with Will the correct way of styling the ListTile for the next episode?
we can use sink and stream controller to get the search results from bloc.
Hello
Please make a video on search in flutter app on different firestore collection
For eg there are three categories of vehical light , heavy , medium and have different collection in firebase
And how to search throughout the app (search any category in home page )
#AskFlutter #firestore
How to use SearchDelegate with data from firestore database?
upvoting
why u didn't implement search with debounce? it is common things when searching
my left ear is happy
lol @ 8:00, "I feel bad things are about to happen"
And he was right. :)
Any tutorial on how to use Google maps in flutter ???
Priyansh Parmar
yeah check on the Google Developer's website
We don't have a full tutorial yet, but the plugin is in development at github.com/flutter/plugins, and we've got a sample up at github.com/flutter/samples.
@@andrewbrogdon558 Can we get any episode on using maps in flutter in future??
Nice, tutorial. But Is there a way to override the default hint text on the text field?
If I filled the suggestions list with restults from my db through http call, what would be a good practice to filter the results/avoid loading big amount of data?
Specifically, I want to use this mechanism with this (flutter_map) map plugin (still praying for an official one). What would be the best to optimize such situation?
The maps plugin is in progress right now at: github.com/flutter/plugins/tree/master/packages/google_maps_flutter. There's a sample currently landing in the flutter/samples repo as well!
For your first question, though, you could try adding an HTTP call to your backend specifically for generating suggestions and then just send back a couple that are displayed in a FutureBuilder or StreamBuilder, or base your suggestions on data that you've already got loaded (like past searches by that user). The SearchDelegate interface is pretty basic (you're just returning widgets, after all), so there's a lot that you can do.
This is fun
Why you guys are using IntelliJ IDEA rather than Android Studio or VSCode 😲 ?
Hi, thanks for the tuto... but, I have a question, how i can replace the placeholder text 'Search' by other text? Thank you!
Question: how would you make a search field to be clicked instead of an iconbutton, have an animated transition to the searchdelegate back and forth as well as show the searched word in the searched field afterwards?
good tutorial, in my case I have 2 registrations of different type. the first is a registration of the product in green I used card and the second purchase I have registered in gray, I would like to do the research to have the same rendering. But not coming. I used a switch like when recording but I always have errors.
Thanks
11:47 Andrew was right, there is an error when he clicked it the first time! #notcrazy
Yeah... does someone find something to resolve that?
@@M0oreFun i think the close() method should not have null on the query parameter
The soft keyboard doesn't come up by default on the iOS emulator
Andrew, you spoke about doing ViewModels... I never heard of VM in Flutter (just BLoC, Redux, etc)... Where do you use it and why?
But we should still see the suggestions when we go back to the app here as i see we returned to the main page
How to implement search bar by dynamically showing search results from MySQL database and converting that suggestion into gridView.builder() ?
which theam is that ..looking good..
A link to the previous mentioned episode would be nice
No problem. We have a whole playlist: bit.ly/BoringShow
14:03 how is this clear method (query = ' ') worked without setstate?
name of intro song please?
thx for the tutorial, may I ask showSearch will raise a [Navigator operation requested with a context that does not include a Navigator.] how to fix it?
Sir i want to perform a search by two field in each documents in firestore in flutter on only one text field
Eg field 1 is code or field 2 is name
Means to say person can search either by code or name
What if i want to search the keyword and show two different search results in two different tabs? How to do this?
hello; thx for the video first. then I wanted to know if it's possible to add an appbar on top of search delegate bar. Thx for the response
Thank you for tutorial, can I change color of cursor? I have tried add cursoColor on appBarTheme, the color still not changed.
when you guys code it just always like WOW
HOW COLUD IT POSSIBLE
I am trying it on Flutter Web. While development, I am debugging it on Chrome browser, so I need to hit enter after typing in the search bar and everything works as expected. But when I deploy it on Firebase Hosting and open it on mobile browser, the Enter key of the mobile soft key pad is sometime showing result and other time (most of the time) doing nothing, as if no one pressed the enter button. Any suggestion?
i need to source code of the bloc
I want to know, can we implement real time communication applications in flutter using websockets or socket.io?
after using your code I saw a error when I used space after any alphabet/ word. Although I solved this error. But can not solved the upper case problem.
Somewhere just after 18:20 Matt says why dont you use a FutureBuilder. Ive tried to make an app that takes data (json) from a rest service using http.get. And i wished to add search functionality. I did what you show us on the video but i am using futerBuilder (i've google it) at the body of the widget instead of Stream
I'm following this very beautiful and usefull course. But I have a big problem with this lesson. Can you help me?
I have the last version installed. When I create the class ArticleSearch, I need to override all the methods, or it will not work. I don't made any other changes respect your code, and it works, when I start debug, but when I press the search icon on the listview, I recieve the following error:
I/flutter (28595): The following NoSuchMethodError was thrown while handling a gesture:
I/flutter (28595): The setter 'parent=' was called on null.
I/flutter (28595): Receiver: null
I/flutter (28595): Tried calling: parent=Instance of 'AnimationController'
I/flutter (28595):
I/flutter (28595): When the exception was thrown, this was the stack:
I/flutter (28595): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
I/flutter (28595): #1 _SearchPageRoute.createAnimation (package:flutter/src/material/search.dart:362:30)
I/flutter (28595): #2 TransitionRoute.install (package:flutter/src/widgets/routes.dart:193:18)
I/flutter (28595): #3 ModalRoute.install (package:flutter/src/widgets/routes.dart:1053:11)
I/flutter (28595): #4 _RouteEntry.handlePush (package:flutter/src/widgets/navigator.dart:2326:11)
I/flutter (28595): #5 NavigatorState._flushHistoryUpdates (package:flutter/src/widgets/navigator.dart:2973:17)
I/flutter (28595): #6 NavigatorState.push (package:flutter/src/widgets/navigator.dart:3297:5)
I/flutter (28595): #7 showSearch (package:flutter/src/material/search.dart:60:32)
I/flutter (28595): #8 _MyHomePageState.build. (package:hn_app/main.dart:77:15)
I/flutter (28595): #9 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:779:19)
I/flutter (28595): #10 _InkResponseState.build. (package:flutter/src/material/ink_well.dart:862:36)
I/flutter (28595): #11 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
I/flutter (28595): #12 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:504:11)
I/flutter (28595): #13 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:282:5)
I/flutter (28595): #14 BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:217:7)
I/flutter (28595): #15 PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:475:9)
I/flutter (28595): #16 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:76:12)
I/flutter (28595): #17 PointerRouter._dispatchEventToRoutes. (package:flutter/src/gestures/pointer_router.dart:122:9)
I/flutter (28595): #18 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:379:8)
I/flutter (28595): #19 PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:120:18)
I/flutter (28595): #20 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:106:7)
I/flutter (28595): #21 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19)
I/flutter (28595): #22 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22)
I/flutter (28595): #23 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7)
I/flutter (28595): #24 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7)
I/flutter (28595): #25 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7)
I/flutter (28595): #29 _invoke1 (dart:ui/hooks.dart:275:10)
I/flutter (28595): #30 _dispatchPointerDataPacket (dart:ui/hooks.dart:184:5)
I/flutter (28595): (elided 3 frames from dart:async)
I/flutter (28595):
I/flutter (28595): Handler: "onTap"
I/flutter (28595): Recognizer:
I/flutter (28595): TapGestureRecognizer#6a252
I/flutter (28595): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (28595): Another exception was thrown: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 3289 pos 12: '!_debugLocked': is not true.
Tell me more about that Builder (in the snackbar part)
i tried this on querysnapshot from firebase, and i couldn't get the results. Can anyone help me?
how to stop user from clicking enter key in the keyboard.. this breaks the search delegate...
This show would be perfect if cricket sounds would be added in the background.
Hello i wnat to implement SearchDelegate buy i have this error : type 'Future' is not a subtype of type 'Future'. how can i fix it? please
Appreciate the video :D . Could you stream it so that we can ask queries live ? :)
You're always welcome to post them here or tweet things at us. To be honest, we can often give better answers if we have a chance to think about the question and do a little research. :)
The status bar reappears when keyboard is opened on Android , not sure if this a bug but I faced this in 2 to 3 devices of Android, anybody experienced the same??
I wanted to add a realtime chatting feature to an app I'm currently working on. I really have lots of ideas, one of them is using TCP sockets but I think it won't be secure or that I will have to write additional code to make it secure. One of the constraints I'm facing is that I'm using a RESTful HTTP API for the rest of the app, and we cannot afford saving messages into firebase. Any idea of how we can do this?
Hmm. This is probably more of a backend question than a Flutter question, since the app would mostly just act as a client that sends/receives things via a server. You could certainly build a REST-based HTTP service that your Flutter app uses to send and long-poll for messages. I imagine that would be simpler than trying to maintain an encrypted TCP connection on a mobile device, though Flutter supports raw, socket-level network communication.
I think I've found a bug in Flutters search view. If you navigate away from the search view using Navigator.push and then back to it using the back button, you cannot enter text into the search box.
Interesting! Can you drop the code you caught this with into a GitHub gist or some other place where I could get at it? I'd love to verify and file an issue. You're also welcome to file an issue directly, of course: github.com/flutter/flutter/issues.
Yeah, I created an issue: github.com/flutter/flutter/issues/23862
How to change color of outline (border) InputDecoration (default’s is blue) without changing theme of app
For many input widgets (TextField, for example) you can provide an InputDecoration of your own in the constructor (try using Theme.of to grab the current one, and then modify it using copyWith).
how to search by image TFlite
Can you please tell me that which editor are you using
I use IntelliJ IDEA. There are also plugins for Android Studio and VS Code.
#boringshow I'd really like to know how to use search delegate to search through a future listview
I'm using SearchDelegate with Mobx, but I'm with an issue: when I close the search page and set the return value on the initial form the screen doesn't not update. The new value is there, because if I save the form, the new value is updated in the storage, mas the screen does not refresh. Anyone can help me? (Mobx with SearchDelegate)
Maybe you forgot to use setState?
@@alexandreasen333 but the point of using observables (mobx) is that you don't need to call setState
@@cruzcunha in the provider pack you at times must call a NotifyListeners function. Maybe similar?
@@alexandreasen333 I resolved that calling Navigator.pop instead of the close method of SearchDelegate
It's the most boring show I ever seen! (joke) Thank you for video
how can i change search hint text?
@@emilyfortuna2262 but we cannot access InputDecoration for the search!
why flutter team using mac book?
Maybe because only the Macbook allows them to build apps for both platforms - iOS and Android.
am i the only one who noticed the error?
i saw that too ahhah
am so annoyed by their typing
Great presentation! Congrats guys. I have a question. If on each article in the result the onTap lead to a new page(navigator push) how can you avoir reloading the search on back from the new route?