Application Design || | Task 3 : Interactive Component Design & Development
09.06.2025 - 07.07.2025 Week 08 - Week 12
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Application Design II / Taylor's University
TASK 3 : INTERACTIVE COMPONENT DESIGN & DEVELOPMENT
This is the result for the week 9 activity. to reflect, using flutter flow is quite complicated especially in the setup part. There's so much things we need to activate carefully to avoid bugs.
We then create a list view and set our variable (image, name and price on it). After that we also set up the navigation for the list to go to the product details page. We create a parameter on it (Type : Document References) so we dont need to create all details page one by one for each product.
The last things is to add a review page and in the product details, we create the button to navigate to the review page. On the review page, we use back end call to navigate into the product list page.
This is the result for week 10 tutorials :
This is the result from week 11 activity.
Application Design II / Taylor's University
TASK 3 : INTERACTIVE COMPONENT DESIGN & DEVELOPMENT
TABLE OF CONTENTS
LECTURES
WEEK 08
Video Tutorial : HERE
This time, we were introduced into flutter flow for the first time. Mr. Razif did a small briefing regarding on the tools inside flutterflow. Later then, we have an exercises to do 3 pages which are login page, sign up page and dashboard page.
We mostly created the elements using the widget provided in the flutter flow. After that we were required to settle the firebase and enable the authentication to run the flutter flow later. This is the result after the exercises, where it just not the wireframe function but the authenthicators was active so if the password / email have issue, the notification would shown on the bottom.
Fig 1.1 W8 Exercises Flutter Flow Week 08 09/06/2025
WEEK 09
Video Tutorial : HERE
On this week, we continue the flutter flow exercises that we have did from last week. We need to add a new button in the dashboard "Go to Map" and tried to launching the google maps by adding Google API key and Firebase setup.
We first go to the widget and search for google maps in flutter flow. Once we checked the bugs, it notify us that we need API Key for Android, IOS and Website where we collect it through Google Cloud API Key. We were required to fill in the details like credit card and address in order to process.
 |
| Fig 1.2 Collecting the API Key Week 09 16/06/2025 |
Once we collect the key, we go to Firebase and in the storage part. At last, we click the deploy in Firebase and Add location point in flutter flow. This are the photo progress of it.
 |
| Fig 1.3 Deployed in Firebase Week 09 16/06/2025 |
 |
| Fig 1.4 Progress on Flutter Flow Week 09 16/06/2025 |
Fig 1.5 W9 Exercises Flutter Flow Week 09 16/06/2025
WEEK 10
Video Tutorial : HERE
Document Version : HERE
This time, we continue with our flutterflow exercises. Our task is to create a product list and adding review on it. We start by add a collection in the firestore and search for 3-5 shoes product in the internet and the images size should be same. After that, we need to fill in the information like description, price, quantity, time, etc. To insert the image in flutter flow, we need to input the picture to the media assets so that we can copy the link to the data manager.
 |
| Fig 1.6 Media Assets Week 10 23/06/2025 |
 |
| Fig 1.7 Products Document Collection Week 10 23/06/2025 |
 |
| Fig 1.8 Product Details Page Week 10 23/06/2025 |
 |
| Fig 1.9 Add Review Navigation Week 10 23/06/2025 |
Fig 1.10 W10 Exercises FlutterFlow Week 10 23/06/2025
 |
| Fig 1.11 Cart Contents Week 11 30/06/2025 |
After placing the content in the firebase, we create a new button to add the items and creating the cart pages as well. In the cart pages, we just need to adjust the padding, spacing for the items style and adding the delete button since the function will be added from database system.
 |
| Fig 1.12 Add Cart Button Week 11 30/06/2025 |
 |
| Fig 1.13 Cart Page Week 11 30/06/2025 |
Fig 1.14 W11 Exercises FlutterFlow Week 11 30/06/2025
INSTRUCTIONS
MIB BOOKLET :
TASK 3
Interactive Component Design & Development
On this task, we will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.
The output of this task is a working animation element that are ready to be integrated in their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML/CSS and JavaScript with the use of animation framework if necessary.
Requirements :
- Interactive components/elements created in Flutter Flow / Lottie Files.
- Project Files & Video Walkthrough
- Online posts in your E-portfolio as your reflective studies
---
A
To began on this task, I
FEEDBACK
l
REFLECTIONS
l
QUICK LINKS
Comments
Post a Comment