Build a Flutter Mobile App Using AWS Amplify - Part 2
Use nested data and Amplify functions to create a trip planner app for iOS and Android
Introduction: Add features to a Flutter mobile app using AWS Amplify
Overview
In this how-to guide, you will continue building the cross-platform Flutter mobile app we started in the first tutorial in this series. 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.
You will introduce multiple new features to the App, such as allowing users to add activities for their trips, set their categories and dates, and upload a file and image for the activity. You will create an Amplify function to create the user’s profile data and you will allow them to use the App to update their profile, change their name, and set their home city.
You will clone the app from GitHub using the terminal in the first module. Then you will update the app to introduce additional features like displaying past trips, adding activities to a trip, and editing the profile of the app’s user.
What you will accomplish
This how-to guide will walk you through creating an app to help users plan trips. You will:
- Clone the app we built in an earlier how-to guide from GitHub
- Use the Amplify CLI to create an Amplify backend for this app
- Update the app to display past trips
- Create a data model for the trip’s activities and the user's profile, and use the GraphQL API to synchronize to the Amplify backend
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.
- Install and configure Git.
- A text editor combined with Flutter’s command-line tools. For this guide we will use VSCode, but you can use your preferred IDE.
AWS experience
Beginner
Minimum time to complete
160 minutes
Cost to complete
Free Tier eligible
Requires
- 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 tutorial, we will use VSCode, but you can use your preferred IDE.
Services used
AWS Amplify
Last updated
September 12, 2023
Modules
This how-to guide is divided into the following modules. You must complete each module before moving to the next one.
- Clone the Flutter app (30 minutes): Clone the Flutter app from Github, update its dependencies, and create an Amplify backend.
- Add the Past Trips feature (40 minutes): Implement logic and UI to display past trips, and introduce a navigation drawer to the app to allow the users to navigate the different pages you will introduce in this guide.
- Add the Activity feature (45 minutes): Add and display the activities of a trip using an Amplify GraphQL API.
- Add the Profile feature (45 minutes): Create a profile for the user using an Amplify function and implement the logic and UI of creating, updating, and displaying the profile in the app.