DEV Community

Offline Programmer

Posted on Mar 31, 2022 • Edited on May 16, 2022

Learn about Amplify API GraphQL Model Helper For Flutter

#flutter #aws #tutorial #opensource

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

offlineprogrammer / amplify_expense_tracker

amplify_expense_tracker

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

In order to run this app:

Pull down the code by running:

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

Create your amplify environment for this app (includes authentication and GraphQL API with owner authentication).

amplify init

Build all your local backend resources and provision it in the cloud.

amplify push

Install dependencies

flutter pub get

Run in simulator

flutter run -d iPhone

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

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