Application Design II - Task 3: Interactive Component Design & Development

7.6.2025 - 7.7.2025 ( Week 8- Week 11)
Gam Jze Shin / 0353154
Application Design II / Bachelor of Design in Creative Media
Task 3: Interactive Component Design &  Development 

---

Index

1. Instructions
2. Task 3: Interactive Component Design &  Development 
3. Feedback
4. Reflection

---

Instructions

fig 1.1  Application Design MIB

---

Task 3

In this task, students will build upon the animation and interaction concepts developed in Task 2, where micro-interactions were created using Figma. While Task 2 focused on visual and animated prototypes, this task transitions into a more functional development phase using FlutterFlow, where students will integrate micro-interactions directly into their apps with live data connections.

Week 8

fig 2.1 - 2.3 Week 8 Class Exercise

In Week 8’s class, I learned how to connect FlutterFlow with Firestore and create a login page. Users are required to register and create an account first. Once their account is created, they can log in using their credentials. If they enter an incorrect email or password, the system will prevent them from logging in.

Week 9

fig 2.4 - 2.5 Week 9 Class Exercise

This week, Mr. Razif taught us how to integrate Google Maps into our app and add location markers to highlight specific areas we want to showcase.

Week 10

fig 2.6 Week 10 Class Exercise

In class, I learned how to add Firestore and connect it from the product list page to the product detail page. This enabled me to apply the feature effectively in my project.

Task 3 Progress

fig 2.7 Basic knowledge in Flutter Flow

Before I started creating the design layout in FlutterFlow, I watched online tutorial videos to learn the basic layout concepts. The YouTuber explained how to structure the layout properly, which I found very helpful and beneficial as preparation before starting this project.
Online Learning Video: https://www.youtube.com/watch?v=_QhCrh00xiI

fig 2.8 Animation

Since my onboarding page includes a logo animation, I used LottieFiles to create the animation and then integrated it into the onboarding screen in FlutterFlow. I followed a tutorial video to guide me through the process. Below is the video I used to learn how to do it.
Online Learning Video: https://youtu.be/_QhCrh00xiI

Home Page

fig 2.9 - 2.12 Home Page Progress

In the home page, I used a carousel slider for the SUPER DEALS section, which allows users to scroll through images horizontally. Additionally, I implemented a GridView widget for displaying items in a grid format. By adjusting the crossAxisCount, I was able to control the number of columns in the grid to suit my design needs.

Error Faced in Home Page

fig 2.13 Error Faced

When I entered test mode, I encountered a couple of issues. The first was an unknown icon error, even though I had used a default icon provided by FlutterFlow. To fix this, I simply selected another icon with a similar appearance but a different name, which resolved the issue.

fig 2.14 Layout Overflow Problem

The second problem was a layout overflow. After testing and troubleshooting multiple times, I realized the issue occurred because one of the widgets inside a Row was wider than the available space. To solve this, I carefully reviewed the layout and made sure that all widgets inside the Row were properly sized and did not exceed the available space.

Navigation Between Page

fig 2.15 - 2.16 Navigation Action

I added a wait action to certain pages, such as transitioning from the onboarding page to the sign-in page, to create a delayed effect. This allows the app to pause briefly before navigating, adding a smoother and more intentional transition for the user.

Navigation Bar

fig 2.17 - 2.18 Bottom Navigation Bar

For the bottom navigation bar, I created it as a component, which allows me to easily drag and reuse it across different pages without needing to recreate it each time. I also set up the navigation actions for each button so that they link to the appropriate pages within the app.

Searching Page

fig 2.19 - 2.20 Searching Page

In the searching page, I added micro animations after completing the layout design. These animations help enhance the user experience by making the interactions feel more dynamic and visually engaging.

Product List Page (Before)

fig 2.21 Product List Page Scrollable

In the product list page, I set the Column to be vertically scrollable so that if the content exceeds the screen height, users can still scroll down to view all the items smoothly.

Firebase (Authentication)

fig 2.22 - 2.24 Firebase Progress

To enable the login feature in my app, I first set up Firebase Authentication by enabling Email/Password sign-in. Then, I connected FlutterFlow to Firebase and created both sign-up and login pages using authentication actions. The sign-up page allows users to register, while the login page verifies their credentials. I added error handling for incorrect logins and set navigation to direct users to the home page after successful login. I also used Firestore to store additional user data when needed. This setup allowed me to build a secure and functional login system.

Firestore Data

fig 2.25 - 2.28 Firestore Data Added

To connect the product list page to the product detail page, I set up a Firestore collection called products with fields like name, price, image, and description. In FlutterFlow, I linked the product list to this collection and created a page parameter (productRef) for the detail page. When a product is clicked, its reference is passed to the detail page, which then displays the correct product information from Firestore.

Product List Page (After)

fig 2.29 - 2.30 List View Vs Grid View

I compared both Grid View and List View, and found that Grid View is more suitable for my project since I need to display two items per row.

Product Detail Page

fig 2.31 - 2.32 Product Detail Page

For the product detail page, I started by building the layout structure using basic widgets like columns and containers. After that, I added the necessary elements such as text, images, and other components to display product details. Once the layout was complete, I linked each part to Firestore by using the page parameter passed from the product list page. This allowed the content to be displayed dynamically based on the selected product.

fig 2.33 Micro Animation Added

Micro and macro animations were added to make the interface more attractive and to draw attention to key features. For example, I applied animations to the "Claim Voucher" and "Buy Now" buttons to make them stand out and guide users toward taking action. These animations help improve the overall user experience by creating a more engaging and interactive interface.

Web Version

fig 2.34 Error in Web Version

When I published my project as a web version, the layout became messy. I discovered that this happened because some of my widgets were not contained within the specific frame size I had set (430 x 932). To fix this, I placed all the widgets inside a container with the exact size I wanted. This helped ensure the layout stayed consistent and properly aligned across different screen views.

Problem Faced

fig 2.35 Problem Faced in FlutterFlow

One of the problems I faced in FlutterFlow was technical issues. Sometimes, the platform would show random errors or fail to connect to the network. When this happened, I had to refresh the page and wait for a while before continuing my work. It could be frustrating, but I learned to be patient and not panic when these issues occurred.

Final Published Web Version
Click here to view the published web version. (Recommended: Adjust size to around 80% for better fit in web version / Best viewed on iPhone 14 Pro (430 × 932))

fig 2.36 Final Published Web Version

Prototype Walkthrough Video

fig 2.37 Prototype Walkthrough Video

Presentation Video
Click here to view the task 3 Presentation Video in YouTube.

fig 2.38 Task 3 Presentation Video

---

Feedback

Week 11
Specific Feedback

He reviewed my progress and felt that the overall development is on the right track, especially since I’ve already integrated animations into the page. He encouraged me to continue building on it. Mr. Razif also mentioned that he will be teaching how to implement payment features soon, which will be particularly beneficial for me, as my app includes a payment function. 

Week 9
Specific Feedback

Mr. Razif taught us how to use Firestore to connect the product page by creating a parameter, which makes it easier to link data from the database directly to specific pages. He suggested that if our app includes features like product listings or details, we should use this method to ensure dynamic data flow and better scalability.

---

Reflection

Experience

This is my first time learning FlutterFlow, and I found it quite manageable to pick up. However, one of the biggest challenges I faced was arranging the layout properly — if not structured correctly, the whole page can easily become disorganized. To overcome this, I searched for online tutorials to understand the basic layout structure. I learned that most pages typically begin with a Column, Row, or Container, followed by adding elements like text, buttons, and icons.

Another major challenge was making the features functional. Connecting Firebase and Firestore to FlutterFlow is a complex process that requires following each step carefully — missing even one can result in errors. Despite the difficulties, I didn’t give up. I took the time to understand and troubleshoot the issues, and eventually, I managed to fix all the errors. I’ve learned from each mistake and will remember them to avoid repeating them in the future, which will help me work more efficiently next time.

Observation

I also observed that FlutterFlow’s Preview Mode and Test Mode behave differently. Some widgets might look fine in preview but encounter overflow or layout issues in test mode. This made me realize the importance of thoroughly double-checking the app in all modes. Additionally, publishing to the web version presented new challenges. Since I designed the app for a specific mobile screen size, the layout became misaligned when viewed in a desktop browser. I had to make adjustments to ensure it displayed correctly.

Findings

Through this process, I’ve come to understand that developing an application, even a simple one, takes a significant amount of time and effort. It’s not just about how the app looks — making sure every component works as intended requires attention to detail. FlutterFlow offers many powerful features, and I truly enjoyed exploring and experimenting with them. It was incredibly satisfying to see the new skills I learned successfully applied to my project. I hope to continue improving and become more confident and familiar with FlutterFlow in the future.