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
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
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.
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
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.
Fig 1.8 Product Details Page Week 10 23/06/2025
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.
Fig 1.9 Add Review Navigation Week 10 23/06/2025
This is the result for week 10 tutorials : 
Fig 1.10 W10 Exercises FlutterFlow Week 10 23/06/2025

WEEK 11
Video Tutorial : HERE
Document Version : HERE
This time we continue with the week 10 exercises where we make a cart and we could add the shoes into cart using database system and we can delete the items from cart as well.
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
This is the result from week 11 activity.
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 

Comments

Popular Posts