Advanced Searching with Multi Thread & Cubit on Flutter
Actually searching pretty better implementation for mobile side and many times work with backend side. Let’s look at how to write the searching algorithm with cubit patterns.
I’ll share better news at the end of the article about me but always firstly work. A little hint about this: G.D.E
Today we learn about how to use a multi-thread mechanism for the can use searching concept.
- We’ll create a searching concept with a service response.
- It needs to delay every touch from the keyboard as well as performance.
- Need a new thread for the searching process thus we can’t block the main thread so it getting better performance.
Isolate
Maybe this topic is very important for a better flutter project because every developer forgot thread usage for the dart project. Firstly we look at what we have for thread usage.
Platform thread: Plugin code use this thread. For example, you can create swift code and call DispatchQueue.main.async { //code }
UI thread: Your dart code executes this thread with dart VM.
GPU(Rester) thread: Layer tree, GPU detail work this here. For example, skia runs this thread. You can’t access directly this thread.
IO thread: That’s understandable for the name. Mostly use input-output operation. For example, file read, write operation, etc.
More detail for this topic, it will read here.
Let’s do our task and we’re going to write business about this concept.
This design needs to follow these steps:
- Fetch data from the service then save its data in memory.
- It needs to create delay from every keypress(it’ll be given a better performance for you but right now we don't need more because we use the only local data)
- Finally, it’s starting to search from a new thread with isolate then we’re getting better power for local data.
Let’s start coding
We need to implement a service to do this scenario. I’m looking fake service then I prefer to use reqres get users service. We might be download this date after keep it in memory while the app using.
Now, we know how can we find data so let’s implement the service endpoint from the project. I’m using vexana for all service requests.
Vexana: it was creating a library from mine. It networks wrapper library with dio package. You can easy to use caching, base header, lib and etc. You can look sample folder for more understanding.
Let’s look at folder structure when we start coding.
Then we were creating this service interface for use every time.
We show the searching algorithm with a new thread so you want to show more detail about the service here for can complete the main goal. After let’s create a cubit manager for can control of the view.
That’s sounds good in additionally let’s write view code with the cubit manager.
That’s ready to use first initially so let’s look at how to show right now.
It’s cool let’s go implement the main idea into the search.
When while starting the thread idea for searching, I can show how to implement delay trigger keypress event from the user. Well begun is half done for consuming the performance from your backend side. I’m going to create a search field then I create a delay design with dart:async package.
That’s a package created for helping async operations. So I need cancelable operations after every keypress and I’ll send to users the last value after the delay.
Normally, You can send requests when the user types anything into the text field but it can bring a burden for the backend so we implement this widget before your search request. This field has a delay of like 300ms then when to user stop typing, this field waits to delay time. The delay is complete, it will send to the event; ‘hey widget, I’m done you can use it this value’.
I prepared these functions start and onItemChanged in additionally CancelableOperation can be provided to cancel after the every key typing form key. It started to initial time after waiting to typewrite. When the user typing into anything in this field, I did cancel the old delay and it starts to new duration while to user write any new key. Finally write this widget in build function.
This widget drawing to the text field and I call it custom _onItemChanged with text field property so that’s good. This widget passes the last value with unchanged params to every wrapped widget. It widget works like this and I will send directly this key for the service or any custom logic.
That’s very happy to me more because mobile development does not just mean front end you can always think about how to consume the backend and also how to use mobile device power more in your own code.
What we did implementing this widget? For example, I’m searching the George keyword. Normally it’s sent every key to the backend but right now just send to George text.
Finally, look at this picture then you can see save to how many key events.
While right now in this article, we got the learn many both knowledge and technique detail so let’s show the most important point. Manager searching from new threads.
Actually, I saw more codes sometimes business, sometimes public repo. The developer generally did it directly in dart code because you know everyone knows dart is running a single thread. That’s right but we can implement other threads manually. compute is a very common option for the create a new thread. If you need to create a more complex thread manager. you should be read isolate detail.
Firstly I’m going to create a utility file into the utility folder to create a static function for the need to compute methods. Compute give a two-parameter: so first need the method how can do, another parameter is method requirements.
Compute functions doesn’t allow two parameters therefore I created SearchModel class that can pass the list and searching keyword.
I’m using this plugin on some projects. It creates JSON serializable functions from the class property.
Yeah, Almost done with the searching process. We need to just call from the cubit class with compute functions.
I’m giving a key from the user typed and call it this function with a new thread. It’ll check this key has contains any item from the list. It getting to items when to find any item otherwise back to null from cubit manager.
We did it everything right now. Let’s look at our screen. If you looking for more call stacks, you can see using a new thread for every search event. We gain more improvement, better CPU usage, and some backend service performance.
And, we came to the end of the article 🧙♀️
Break the ice 🥳🥳
I want to share great news regarding me. I’m officially Google Developer Expert on Flutter and Dart so I’m on cloud nine for this reason 🥳. We’ll meet more than article contents about flutter & dart.
Thank you for reading. We’ll meet new articles 🍀
Best wishes to you
