Flutter Community
Published in

Flutter Community

Learn about Amplify API GraphQL Model Helper For Flutter

Photo by Brett Jordan on Unsplash

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

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

https://twitter.com/FlutterComm

--

--

--

Articles and Stories from the Flutter Community

Recommended from Medium

Bluetooth Low Energy(BLE) connection with Android(Part 3)

Oan uiv94j 9vdf94 §

10. Interfaces & Abstract Classes

3 Reasons Why You Should Avoid Logs In Tests

Headless commerce concepts

On Hierarchy, Micro-Management and Leadership in R&D

I’d always underestimate the amount of time I had to arrive to meet a friend or an appointment

Moving From MAMP to Valet: For Craft CMS 3 and Everything Else

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mo Malaka

Mo Malaka

Solutions Architect @aws-amplify | Lifelong Learner | Opinions are my own

More from Medium

Mapbox + Flutter Bloc + Location Package

Efficient Logger for Your Flutter App

Example of logger output.

Contributors for Google Summer of Code 2022

Up your testing game