Flutter Tutorial - Search TextField For Local & Network - Search Bar & Search Delegate
Вставка
- Опубліковано 21 лип 2024
- Let's create a Flutter Search TextField & Flutter Search Bar & Flutter Search Delegate for local & network-based search queries in Flutter.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/sear...
My Courses | johannesmilke.teachable.com/p...
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
App Bar & Transparent App Bar Tutorial: • Flutter Tutorial - App...
Calculator UI Tutorial: • Flutter Tutorial - 1/2...
Fitness App UI Tutorial: • Flutter Tutorial - 1/2...
Social App UI: • Flutter Tutorial - Soc...
Todo App From Scratch Tutorial: • Flutter Tutorial - 1/2...
Shop UI From Scratch Tutorial: • Flutter Tutorial - 1/3...
Chat App With Firebase Tutorial: • Flutter Tutorial - Bui...
Movie App UI Tutorial: • Flutter Tutorial - Flu...
Onboarding UI Screen Tutorial: • Flutter Tutorial - Onb...
Sponsor:
Invoice Ninja Plugin: pub.dev/packages/invoiceninja
Invoice Ninja App: www.invoiceninja.com/mobile/
TIMELINE
0:00 Introduction SearchAppBar
1:24 Local SearchAppBar
3:11 Local Search Results
3:58 Local Suggestions
5:11 Call showSearch
6:02 Handle Search Input
7:47 Clear Search
9:04 Close Search
9:26 Show Local Results
10:41 Fix Clear Search
11:11 Alternatives For ShowResults
12:24 Conclusion ShowResults
12:55 Highlight Search Query
15:15 Network SearchAppBar
15:47 Network Suggestions
18:57 Show Network Results
21:41 Gradient For Results
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
-- LEARN MORE --
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
WATCH APP BAR & TRANSPARENT APP BAR TUTORIAL | • Flutter Tutorial - App...
WATCH RADIO BUTTON - SINGLE & GROUP TUTORIAL | • Flutter Tutorial - Rad...
WATCH IMAGECROPPER - PICK & CROP IMAGES TUTORIAL | • Flutter Tutorial - Ima...
WATCH POPUPMENUBUTTON - FOCUSED MENU TUTORIAL | • Flutter Tutorial - Pop...
WATCH POPUPMENUBUTTON - SETTINGS MENU TUTORIAL | • Flutter Tutorial - Pop...
WATCH HOW TO USE FORM AND TEXTFORMFIELD [2021 .. TUTORIAL | • Flutter Tutorial - How...
WATCH TEXTFIELD - DEEP DIVE TUTORIAL | • Flutter Tutorial - Tex...
WATCH UPDATE PACKAGES & DEPENDENCIES AUTOMATIC .. TUTORIAL | • Flutter Tutorial - Upd...
WATCH ANIMATEDBUILDER - DEEP DIVE TUTORIAL | • Flutter Tutorial - Ani...
WATCH INHERITED WIDGET EXPLAINED IN DETAIL TUTORIAL | • Flutter Tutorial - Inh...
WATCH BARCODE SCANNER APP TUTORIAL | • Flutter Tutorial - Bar...
WATCH QR CODE SCANNER APP TUTORIAL | • Flutter Tutorial - QR ...
WATCH 2/2 FITNESS APP UI TUTORIAL | • Flutter Tutorial - 2/2...
WATCH 1/2 FITNESS APP UI (FOR BEGINNERS) TUTORIAL | • Flutter Tutorial - 1/2...
WATCH 2/2 CALCULATOR UI (RIVERPOD) TUTORIAL | • Flutter Tutorial - 2/2...
WATCH 1/2 CALCULATOR UI (RIVERPOD) TUTORIAL | • Flutter Tutorial - 1/2...
WATCH ONBOARDING UI SCREEN TUTORIAL | • Flutter Tutorial - Onb...
WATCH 2/2 IMAGE - DEEP DIVE TUTORIAL | • Flutter Tutorial - Flu...
WATCH 1/2 IMAGE - DEEP DIVE TUTORIAL | • Flutter Tutorial - Flu...
WATCH IGNOREPOINTER & ABSORBPOINTER TUTORIAL | • Flutter Tutorial - Ign...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke - Наука та технологія
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/search_appbar_example
App Bar & Transparent App Bar Tutorial: ua-cam.com/video/dHBF4IJZvHk/v-deo.html
Calculator UI Tutorial: ua-cam.com/video/N8C-cW7u2JA/v-deo.html
Fitness App UI Tutorial: ua-cam.com/video/4KQ-f_6Y7p8/v-deo.html
Social App UI: ua-cam.com/video/PvDOgOdUgkU/v-deo.html
Todo App From Scratch Tutorial: ua-cam.com/video/kN9Yfd4fu04/v-deo.html
Shop UI From Scratch Tutorial: ua-cam.com/video/CQZr-GXe__Y/v-deo.html
Chat App With Firebase Tutorial: ua-cam.com/video/wHIcJDQbBFs/v-deo.html
Movie App UI Tutorial: ua-cam.com/video/aLwjk-G2Qik/v-deo.html
Onboarding UI Screen Tutorial: ua-cam.com/video/CQlA2p--oEg/v-deo.html
Wow just what I needed. This is the first proper video on search listview. Thank you
Great Video, I really like how you organized your code and that you only have an example of moderate size this really helps to incorporate the concepts in ones own Apps.
keep the videos coming love it. gaining so much
Great video, thank you very much!!!
Fiinished my search bar, thanks man, you also helped me solve an error i was experiencing when i built my first app three years ago, a big thank you my humble like and subscription earned
Glad you liked it, wycliffe ottawa 😀
superb job.. i dont know how u make such great videos..
Thanks for this clear explanation
content and way to delivery ❤💕
super helpful
Hi Johannes, thanks again, my question; can you search by using any characters instead of starting with the first charcater
nice tutorial
thank you :)
Awesome! thanks a Bunch!
@@HeyFlutter thank you :)
Im really like your video.
I'm ur first like. Love ur videos btw !
Hi Johannes!
Can you do this thing in firebase. I need to search in firestore data.
Awesome stuff as always! What i want to know is how to implement this for search query in firebase firestore
Thanks for your feedback, Photo Genie! 🙂
You have two options for implementing the search with firebase
1) You save to save your texts lowercase in firebase. For more info see here: stackoverflow.com/a/56747021
2) Recommended way! You need to use a service such as Algolia or ElasticSearch. For more details see here: stackoverflow.com/a/49942559
That good. How to search in textfield.
Sir how to fetch efficiently data from an API which contains list of 10000 objects.
Getting these large amount of data will reduce complexity.. so please give me an efficient way to solve this problem!
Really nice!! Do you have a guide to how I make the search without having to make it full screen? I would like to have it as a dropdown
@@HeyFlutter The package Flutte-flappy-search is DISCONTINUED 😕
Thank You Nanna Bach Munkholm! Follow this link: blog.smartnsoft.com/an-automatic-search-bar-in-flutter-flappy-search-bar-a470bc67fa1f
I hope you will get your answer 🙂
Gr8 job bro, but my question is wouldn't be harsh to request the server when each character is clicked?
Or is there any way of handling this huge resource consumption issue, like implementing debouncing. Thanks for your contribution
Thank You Tito Frezer! Follow this link: stackoverflow.com/questions/51791501/how-to-debounce-textfield-onchange-in-dart
I hope you will get your answer 🙂
Hi Johannes. Your videos are brilliant and I've just subscribed to your chanel. I do have a question about this one. I am trying to implement the same thing from locally stored data within a json file. I have build a model that extracts the data from the json file, but I am not sure how to successfully use that data in a search page like in your tutorial. Thanks!
@@HeyFlutter Thanks. I'll give it a go. I've got the search page working, although it just doesn't search. I've made sure each group of my json data has a particular search string, so that's the one I'll use for the searching.
@@HeyFlutter I got the search through locally stored json data working perfectly! I'm just thinking, do you know how to modify it to search through stored CSV data, since CSV files have a much smaller size? Or, would it be best to store the data as CSV and parse into json for searching? That just seems quite resource intensive though, especially for larger amounts of data. Thanks :)
close(context,null) is not receve (null ) showing error (The argument type 'Null' can't be assigned to the parameter type 'String'.)
Hello, Usman Nawaz! Follow this link: stackoverflow.com/questions/66798782/error-the-argument-type-string-cant-be-assigned-to-the-parameter-type-stri
I hope it will solve your problem. Thank You 🙂
How can I make a custom page for every city?
Thank you, Nexoknecht HD! 🙂 well that's pretty simple you can create your custom pages and call api for each screen differently instead of searching
Unable to change cursor color of search deligate its blue by default and Hint text 'Search'..so how can i change it ..i tried wrapping scaffold with them widget but its not working
theme*
Thank you Jawad Aslam, make sure to follow the tutorial step by step 🙂
Worked on this code today. Was really cool.. have a few questions:
1. why do we need an Opacity Widget at the end of our buildDegrees() in our WebApi call?
2. I have never seen anything like- json['weather'].first['main']; .... i would usually use something like- json['weather'][0]['main'];... is there a link you can share with accessing a Json array the way you did... seems cool ;-)
3. In dark mode my searchbox & search Text both are white... I cant see anything... I saw on Git... there seems to be an issue opened... hence Im going without dark mode :-(
@@HeyFlutter just the fact that you took the trouble to answer me is really admirable. Thanks. And yeah it makes sense now! :-)
1. This is used to align the text properly in the center. The degrees text "°" is on the right side visible and the same text "°" is on the left side invisible. This results in a centered degree number.
2. Yeah you can also use: json['weather'][0]['main']; it is the same.
3. Check my new video out about Dark & Light Theme, maybe this helps you! ua-cam.com/video/HSAa9yi0OMA/v-deo.html
Please Johannes make sure that you provide the code of every video for free, whenever I watched your full videos and want to look up your code then your code are paid, plz make sure that it available for free it will contribute to the community.
Thank You Abdur Rehman!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
hi johanness,
since u removed this following code for the network search:
final suggestions = query.isEmpty
? recentmembers
: members.where((member) {
final memberLower = member.toLowerCase();
final queryLower = query.toLowerCase();
return memberLower.startsWith(queryLower);
}).toList();
and, in the video you are only searching for berlin so the output is showing correct. but when i worked with my api even if I search "california" , its showing me all the places as outputs.
Am i wrong? please correct me
Thank you Prashanna GC, make sure to follow the tutorial step by step 🙂