How to Integrate Elasticsearch with Flutter
By: Kirshi Yin
Tags: Software Development, Flutter, Dart, Elasticsearch, Programming

Create the User Interface

This tutorial assumes you already have Flutter SDK installed on your machine. If not, check out the installation guide.

Create a new Flutter project in your IDE

Open the pubspec.yaml file. We need to get the following dependencies:

elastic_client: ^0.1.13

universal_io: ^1.0.1

Execute the flutter pub get command to download the libraries.

command to download the libraries. Let’s create our Book object. Create a file called book.dart under the lib directory. Based on our JSON data, we need the following attributes:

Let’s move on to our main.dart file. Remove the autogenerated code since we’re going to replace it with our code.

file. Remove the autogenerated code since we’re going to replace it with our code. Import the necessary elastic_client packages and book.dart .

Note that we have to create a separate class for the http_tans_impl.dart import. We’ll do that shortly.

Create the MyHomePage widget:

Workaround for a bug in the web channel

I want to create a web application for this tutorial. At the time of writing this article, there’s a known bug in the elastic_client package affecting the web channel. Feel free to skip this part if you intend to use the elastic_client library for mobile development. You can follow the official example from the elastic_client ’s installation page. If you’re interested in the workaround, just read on.

The official elastic_client example is using the ConsoleHttpTransport class. The problem is when you run your Flutter code on the web, you’ll receive an error message:

Uncaught (in promise) Error: Unsupported operation: Platform._operatingSystem

According to the developer community of Flutter, the issue is that dart:io isn’t really supported when compiling for the web.

As a workaround, you can use the universal_io library instead.

I’m going to show you how to achieve a working example.

All you need is to create your own implementation of Elastic’s Transport class and to adjust the code to match your requirements.

This is my implementation for this demo:

Note that _httpClient.autoUncompress is set to true to prevent the client from creating a GZIP file when we send our data. Also, the header contentType should accept JSON.

Now, that we have a working Transport , we can go on with the rest of the application.

Returning to our UI

Let’s go back to the main.dart file, and create the _MyHomePageState widget

class _MyHomePageState extends State<MyHomePage> {

}

For convenience, just paste the following code inside this new class. The explanations are right below it.

We’ve created keywords for the query search criteria.

We want to match criteria in all of our documents. The bool query combines multiple query criteria. The should clause indicates that the criteria are desirable.

Note that Elasticsearch returns documents ranked by relevance scores depending on how well a document meets the criteria in each clause.

To notify the UI that the internal state of our objects has changed, we’ve used the setState() method and added our list of books to a resultBookList variable. We’ve also stored a variable searchStarted to indicate whether a search has been triggered or not.

method and added our list of books to a variable. We’ve also stored a variable to indicate whether a search has been triggered or not. We need to get the text from the user input field and pass it to the indexCall() method’s query parameter. This is achieved by the TextController .

method’s query parameter. This is achieved by the . It’s advised to dispose of it after usage, so let’s implement that method:

Finally, close the transport:

await transport.close();

We’ll display the data in a DataTable widget.

Add this code to create the widget:

As you can see, there are two places where we call the search-query function: when the user presses the ElevatedButton and when they press the Enter key. It makes it more convenient when you’re using it in a web browser.

This is how to create the DataTable and populate its content based on the query result:

If the resultBookList is empty, we don’t want to display the table. We return an empty Container instead. However, if the search has already been started, and no results were found, then we display a Text field to inform the user. That’s why we needed to set the variables in the setState() method.

That’s it! Our code is ready for testing.