App Design 2 - Task 3: Interactive Component Design & Development

- July 07, 2025

09.06.2025 - 07.07.2025
Michael Chan Henn Loong / 0363611
Application Design 2 / BA of Design (HONS) in Creative Media / Taylor's University
Task 3: Interactive Component Design & Development

INSTRUCTIONS

Task 3: Interactive Component Design & Development

Introduction

This project was built using FlutterFlow and includes a complete game store app prototype. The app consists of the following pages: Welcome Page, 5 Onboarding Pages, Login, Sign Up, Homepage, Search, Search Result, Game Description, Cart, Payment, and Payment Successful.

HomePage Set Ups

At the beginning, I struggled with layout setup because I initially placed everything in a single Column, which made the Rows unresponsive. After some trial and error, I learned to use Containers to wrap each section. This allowed each Row to function independently within its own Container.

I reused these Containers and copy-pasted them into the Search Result page to maintain layout consistency.

To fix the issue where enabling "Scrollable" caused layout squeezing, I set the Column Alignment to x: 0, y: -1. This resolved the alignment issue and gave me full control over moving elements freely.

Fig 1.0, HomePage Setup

Search Result Page

The Containers from the Homepage were reused here for a consistent visual structure. This saved time and ensured a coherent design language across the app.

Fig 1.1, Search Page

Game Description Page

This page was one of the most complex due to many rows and layout adjustments. I added a 16 width padding Container to ensure that the layout didn’t touch the sides of the screen. The top padding (T1 and T2) was initially set to 20 height, but for new sections under another T1, I increased the height padding to 50.

I tried to create two symmetrical rows but couldn't make it work with one large image as in my Figma file. So I converted everything into a single row with uniform image sizes. Most of my Containers have a border radius of 10 to maintain consistency.

Fig 1.2, GameDescription Page

Cart Page

The cart page was relatively simple since I was already familiar with the layout techniques by then. I reused learned structures and implemented them quickly.

Fig 1.3, Cart Page

Payment & Success Pages

These pages were straightforward and is the final step of my page development process. By now, I have confidence in using FlutterFlow had grown more compared to when I just started using it.

Fig 1.4, Payment Page

Fig 1.5, Payment Successful Page

Full List of Pages Created

Welcome Page
Onboarding Page 1
Onboarding Page 2
Onboarding Page 3
Onboarding Page 4
Onboarding Page 5
Login Page
Sign Up Page
Homepage
Search Page
Search Result Page
Game Description Page
Cart Page
Payment Page
Payment Successful Page

Final Submission

Fig 1.6, Task 3 Presentation

Reflection

This project was a huge learning experience for me. I encountered multiple layout challenges at the beginning, especially with Columns, Rows, and Containers. However, figuring out how FlutterFlow handles structure taught me a lot about layout logic and visual hierarchy.

I enjoyed the visual aspect of building the UI much more than writing code, and FlutterFlow made it easier and more intuitive for me. My favorite part was working on the Game Description Page although it was difficult, it was also the most rewarding to complete. Overall, I now feel much more comfortable navigating FlutterFlow, setting layout paddings, alignment, and styling the UI effectively.

Search This Blog

Michael Chan Henn Loong (0363611)