Build a Flutter Mobile App Using AWS Amplify - Part 1
Create a trip planner app for iOS and Android
Overview
In this how-to guide, the first part of a two-part series, you will create a cross-platform Flutter mobile app using AWS Amplify. The app is a trip planner where users can create a trip and set its name, destination, and dates. Additionally, they can upload a banner image for the trip.
In the second guide of this series, you will add new features to the app, such as adding activities for the trips using a nested data model and creating the user's profile data using an Amplify function.
What you will accomplish
This how-to guide will walk you through the steps to create an app to help users plan trips. You will:
-
Create a Flutter app using the terminal and structure its folders using the Feature-First approach where you will create a folder for every app’s feature.
-
Use the Amplify CLI to create the Amplify backend for this app
-
Add Amplify authentication capabilities to your app and use the Amplify Authenticator UI library
-
Create a data model for the trips and use the GraphQL API to synchronize to the Amplify backend
-
Add Amplify storage to your app to enable users to upload an image for their trips
Prerequisites
-
An AWS account: If you don't already have an account, follow the Setting Up Your AWS Environment
tutorial for a quick overview. -
Install
and configure the Amplify CLI. -
Install
and configure Flutter. -
A text editor combined with Flutter’s command-line tools. For this guide we will use VSCode, but you can use your preferred IDE.
Implementation
AWS Experience |
Beginner |
Time to Complete |
60 minutes |
Cost to Complete |
Free Tier |
Services used |
|
Last updated |
August 23, 2023 |
Modules
This how-to guide is divided into the following short modules. You must complete each module before moving to the next one.
-
Module 1: Create a Flutter app (15 minutes): Create a Flutter app, add its dependencies, and create its folder structure. Additionally, you will also define the app colors and the routing constants.
-
Module 2: Add Amplify authentication (10 minutes): Create the Amplify backend for the app and implement authentication using the Amplify authenticator UI library.
-
Module 3: Add API (20 minutes): Create the Amplify GraphQL API for the app and implement the CRUD operation for the trip feature.
-
Module 4: Add Amplify storage (15 minutes): Create the Amazon S3 bucket for the app and implement the ability to upload an image for the trip.