AWS Amplify is a set of tools and services that enables mobile and front-end web developers to build secure, scalable full-stack applications powered by AWS. Amplify recently released a new enhancement for the API category to improve the GraphQL experience by allowing developers to use the codegen models to quickly generate request objects for queries, mutations, and subscriptions. The responses will then be automatically parsed into instances of the model.

Let’s demonstrate this by building an expense tracker app where users can manage their expenses by recording, editing, deleting, and categorizing them into buckets. We will use the Amplify Authenticator UI library to quickly create an authentication flow so we can focus on the core functionality of our app. Once the authentication is done, we will show a homepage with two floating buttons to create expenses and categories.

Prerequisites

• Install and configure Amplify CLI
• A Flutter application targeting Flutter SDK >= 2.0.0 (stable version) with Amplify libraries integrated
• An iOS configuration targeting at least iOS 11.0
• An Android configuration targeting at least Android API level 21 (Android 5.0) or above

Authentication Flow

The Authenticator will add complete authentication flows to the App. All we need to do is wrap the MaterialApp widget with the Authenticator widget. Yes, it is that easy!!

Data Modeling

We will use two data models for our Graphql schema: ExpenseItem & ExpenseCategory. The ExpenseCategory can have multiple ExpenseItems i.e., 1:n relation. The owner-based auth we are using for this schema will allow each user only to see the expenses/categories they made.

Run the command below to generate the models files. They will be placed under the lib/models directory.

Create, update, delete data

We created a service to implement the CRUD functions for the models. We will run GraphQL mutation with Amplify.API.mutate to create, update and delete the data. We will fetch the data using Amplify.API.query

The Widget Tree

The App UI widgets will collect the required information to create, update & delete the expense items & categories, then call the corresponding API service methods.

We organized the files according to their functionality/type. We have a single page for the App in the pages folder. We are using the widgets folder for the widgets we created to handle the UI of Adding/Updating/Deleting the expense items and categories. The UI uses the APIService in the services folder for integrating with Amplify API category for the CRUD operations. The amplify codegen models command will generate the models files and place them in the models folder.

Run the App

We packed the code with cool concepts and ideas. We used multiple widgets/files to make things easier to read. We tried to follow best practices to produce a modular, testable & maintainable code. The App code is here

git clone https://github.com/offlineprogrammer/amplify_expense_tracker.git

amplify init

amplify push

flutter pub get

flutter run -d iPhone

Let’s go step by step through how to run this App.

Learn more
You can use the following resources to learn more and get help regarding AWS Amplify:

• 🎬 Authentication Using the AWS Amplify Authenticator UI library
• 🚀 Amplify Flutter Github
• 📜 Amplify Docs
• 💬 Amplify Discord Community

Thank you. 👋🏻

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

Check my Apps on Google Play & Apple Store

Cover image Brett Jordan on Unsplash