Integrate Amazon Lex With Flutter 3.0

Muhammad Tabish Khanday
2 min readAug 16, 2022

Amplify Flutter brings together AWS Amplify and Flutter, designed for customers who have invested in the Flutter ecosystem and want to take advantage of the power of AWS.

With the support of AWS packages on pub.dev, now the integration of Amazon Lex with flutter has become easier than ever.

We will communicate with Lex using our Flutter application.

What we are going to use?

We will be creating a chat application with the Amazon Lex Bot. To get a head start, we need to install the following packages from pub.dev:

  • aws_common: ^0.2.2: For Common types and utilities for AWS packages.
  • aws_signature_v4: ^0.2.1: An HTTP request signer for AWS Signature Version 4, which can be used to communicate with AWS services. Works in Web, VM, and Flutter projects.
  • uuid: ^3.0.6 : To create a unique UUID
  • flutter_chat_ui: ^1.6.4: To create a basic chat UI

Now we are ready to start our project.

Setup a Backend Service File

I have created a file named lex_bot_service.dart which will contain the code to interact with our AWS Lex bot.

Replace [BOT_NAME], [BOT_ALIAS], [USERID] corresponding to your Lex Bot.

Create Chat UI

To create the chat UI, I will use flutter_chat_ui package. It is an actively maintained, community-driven chat UI implementation.

I have created a file name lex_bot_screen.dart that will contain the code for implementing Chat UI.

Run your Flutter Application

The last part is to run your Flutter Application.

While running your application, you need to pass your AWS Credentials that have the AWS LEX Roles associated with them like SECRET_KEY and the ACCESS_KEY using dart environmental variables.

To do so just use — dart-define argument during flutter run or flutter build

# flutter run --dart-define=AWS_ACCESS_KEY_ID=[ACCESS_KEY] --dart-define=AWS_SECRET_ACCESS_KEY=[SECRET_KEY]

Here is the final result 🔥🔥

That’s all for this article, Hope You learned Something from here.

Thanks, everyone for reading. I’ll be back with some new articles very soon, thanks!

Muhammad Tabish Khanday

LinkedIn: https://www.linkedin.com/in/mtabishk/

--

--