A Todo App using AWSAmplify & GetX

AWSAmplify DataStore enables the developers to add offline capabilities to their apps with just a few lines of code. It provides an on-device data storage service to read, write and observe data (online & offline mode) and sync it to a cloud database (DynamoDB).

Amplify use GraphQL for the data modeling, and it creates the models in the native language of your framework (JS, Java, Swift, Dart, etc.). This post will use the DataStore to create a Todo App where the user can create, update & delete tasks.

GetX is a micro-framework that combines State Management, Dependency Injection, Route Management, and other valuable utilities (e.g., internationalization, theming, validation, etc.). It is one of the most popular state management packages.

We used the Admin UI to create the backend and enable authentication

Create the Flutter App and run the command below to pull the Amplify backend

Follow the instructions described here to add GraphQL API. Once completed, you will get the following in your App.

We will need two models (Users & ToDo), update the file amplify/backend/{api_name}/schema.graphql as below

The schema is ready; run the Amplify CLI command below to generate the models.

The models will be created as below

We will use three GetxControllers:

AuthController: This will handle the authentication operations by integrating with AuthService, which will use Amplify to authenticate the user. Once the user is signed in, we will create a user datastore record using DataStoreService. here we will also determine what page to display to the user based on the auth status.

Check my post on here to learn more about Amplify Authentication

UserController: We will use it to get the user record from the DataStore.

TodoController: This is for creating\deleting\updating the tasks from the DataStore.

In the HomePage, the user will be able to create and manage the Todo tasks. Here we will use the power of GetX and its reactive state manager to enable the following features:

Displaying the user email

Displaying the todo tasks

We will use a Get.dialog to add a new Todo task

We will show a checkbox for each task; the user can tab it to flag it as done. Dismissing the task will delete it from the DataStore.

Check the code on github here

Follow me on Twitter for more tips about #coding, #learning, #technology…etc.

Check my Apps on Google Play