DEV Community

Cover image for Learn about Amplify API GraphQL Model Helper For Flutter
Offline Programmer
Offline Programmer

Posted on • Updated on

Learn about Amplify API GraphQL Model Helper For Flutter

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!!

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

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.

App Folders

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

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:

  1. Pull down the code by running:
git clone https://github.com/offlineprogrammer/amplify_expense_tracker.git
Enter fullscreen mode Exit fullscreen mode
  1. Create your amplify environment for this app (includes authentication and GraphQL API with owner authentication).
amplify init
Enter fullscreen mode Exit fullscreen mode
  1. Build all your local backend resources and provision it in the cloud.
amplify push
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies
flutter pub get
Enter fullscreen mode Exit fullscreen mode
  1. Run in simulator
flutter run -d iPhone
Enter fullscreen mode Exit fullscreen mode

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.




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:

Thank you. πŸ‘‹πŸ»

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

Check my Apps on Google Play & Apple Store

Thats all

Cover image Brett Jordan on Unsplash

Discussion (0)