Advanced Searching with Multi Thread & Cubit on Flutter

September 8, 2021 Article, Search

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

Weneed 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.

abstract class ISearchItem {
ISearchItem(INetworkManager networkManager) {
_networkManager = networkManager;
}
Future fetchAllItem();
late final INetworkManager _networkManager;
final String _path = ”;
}

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.

class SearchCubit extends Cubit {
SearchCubit(ISearchService service) : super(SearchLoading()) {
_searchService = service;
_fetchItems();
}
late final ISearchService _searchService;

Future _fetchItems() async {
final response = await _searchService.fetchAllItem();
if (response != null) {
emit(SearchComplete(response));
} else {
emit(SearchError(‘something went wrong’));
}
}
}

That’s sounds good in additionally let’s write view code with the cubit manager.

Widget build(BuildContext context) {
return BlocProvider(
create: (context) => SearchCubit(SearchService(networkManager)),
child: Scaffold(
body: BlocConsumer(
listener: (context, state) {},
builder: (context, state) {
switch (state.runtimeType) {
case SearchLoading:
return Center(child: CircularProgressIndicator());
case SearchComplete:
return _createSearchListView(state as SearchComplete);
default:
return SizedBox();
}
},
),
),
);