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

05.06.2025 - 07.07.2025 （Week 7 - Week 11)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Application Design 2
Task 3: Interactive Component Design & Development

---

Index

1. Lectures

2. Instructions

    2.1 Progress

    2.2 Flutterflow Progress

    2.3 Submission

3. Reflections

---

Lectures

Week 8

Fig1.1 Map

Integrating Google Maps in FlutterFlow

Setting up Google Maps in FlutterFlow can be a bit tricky—but with the right steps, you’ll get it working smoothly. In this session, we explored how to integrate Google Maps, enable API keys, and fetch location data from Firebase.

Step 1: Enable Google Maps API

We began by creating a new project in FlutterFlow and dragging in the Google Map widget. But before it could work, we had to go into the Google Cloud Console, select the correct project, and enable the Maps SDK for Android, iOS, and JavaScript.

Step 2: Set Up Billing and API Keys

Each platform needs an API key. We created one in the Google Cloud Console and added it into FlutterFlow under App Settings → Integrations → Google Maps.

Step 3: Add Location Data with Firebase

We then created a Firestore database to store location points like Taylor’s University and McDonald’s. Each record included a name and geopoint (latitude & longitude).

Step 4: Displaying Markers on the Map

After the data setup, we returned to FlutterFlow and used the Google Map widget with marker type set to “document”, then connected it to our Firestore collection. Initially, we used a single marker setup to avoid errors.

Throughout the process, we encountered a few hiccups—like platform errors, missing markers, and delayed map loading. But after some tweaking, we finally got the map to display properly with markers showing correct locations.

Integrating Google Maps into your FlutterFlow app requires careful configuration—but once it’s done, it opens up a world of possibilities for location-based features. Just remember to enable all necessary APIs, configure billing, and link your Firebase data correctly.

Week 9

Fig1.2 Product List

Building a Dynamic Product Listing and Detail Page

This week, we learned how to build a dynamic e-commerce experience using FlutterFlow and Firebase Firestore—from creating a product listing page to linking it with a detail view. Here's a concise walkthrough:

Step 1: Setup Firestore Collections

We started by creating two Firestore collections:

• products: name, description, image, price, quantity, createdAt

• reviews: productRef (linked), username, comments, rating, timestamp

Step 2: Upload Products with Images

Images couldn't be directly uploaded in Firestore, so we uploaded them into FlutterFlow's media assets, then used URLs to link them back to each product document.

Step 3: Build Product List Page

We created a new Product List Page and used the ListView widget. By enabling dynamic children, we linked this to our Firestore products collection, allowing items to be displayed dynamically.

Each product displays its name, image, and price—no description to keep the layout clean.

Step 4: Create Product Detail Page

Clicking on a product now navigates to a Product Detail Page, where users can view:

• Image

• Product Name

• Description

• Price

With just a few smart setups—Firestore collections, media assets, dynamic widgets, and navigation—we've laid the foundation for a fully functioning product catalog in FlutterFlow. It's clean, scalable, and ready for features like reviews and checkout.

Week 10

Fig1.3 Cart

Building a Shopping Cart in FlutterFlow

In Week 10, we tackled one of the core features of any e-commerce app: the shopping cart. We covered everything from setting up Firestore collections to building the frontend for adding, displaying, and removing items.

Step 1: Create a Firestore Collection for the Cart

We created a new collection named cart with the following fields:

• user_id (string)

• product_ref (document reference to products)

• quantity (integer)

• added_at (timestamp)

Step 2: Add “Add to Cart” Button in Product Detail Page

We inserted a button labeled "Add to Cart" on the product detail page. The button triggers a Firestore create document action that writes the product reference and user ID to the cart collection.

Step 3: Verify Database Updates

We tested the button and checked that entries appeared correctly in Firestore’s cart collection. If they did, we moved on to building the cart display.

Step 4: Display Cart Items

We built a Cart Page using a ListView widget. Data was fetched using a backend query filtered by the current user's ID. Each cart item shows the product name, image, and price, retrieved via document from reference.

Step 5: Remove Items from Cart

We added a delete icon button beside each item. Tapping it deletes the corresponding Firestore document from the cart collection. A key lesson: make sure you’re deleting from the correct collection—don’t accidentally remove the product itself!

Step 6: Add Feedback with Snackbar or Dialog

To improve UX, we added a Snackbar (or optional Dialog) after adding to cart. This gives users a quick confirmation that the item was successfully added.

We planned to calculate the total price using custom logic that multiplies quantity by product price, then sums it up. But due to complexity, this will be covered in a separate tutorial.

---

Instructions

MIB For Application Design 2

Requirement:

In this task, I was required to go beyond static visuals and actually develop interactive components for my app using HTML, CSS, and JavaScript. Unlike Task 2 where I focused on planning and prototyping, this time I needed to build working interactions that are ready to be integrated into the final product.

I was encouraged to think creatively about how animations and interactions could enhance the user experience. Some of the components I considered include:

• Navigation menus with animated icons

• Pop-up boxes and modal interactions

• Interactive buttons with visual feedback

• Smooth screen transitions

Ultimately, this task challenged me to combine design thinking with technical implementation, pushing me to understand how thoughtful micro-interactions can make a digital experience more intuitive and delightful.

Task 3 Progress

For Task 3, my main focus was to implement the MVP (Minimum Viable Product) of the LFS Cinema App, which centers around a quick booking process. Using FlutterFlow, I built a working prototype that translates my improved Figma design from Task 1 and animated mastersheet from Task 2 into real, interactive components.

✅ What I’ve Completed：

• Entire MVP flow – Quick booking steps from movie to confirmation
  

• Basic animations – e.g., loading bar in the splash scene
  

• Pop-up panels – Login and cart interactions
  

• Conditional button activation – Buttons only work when all requirements are met
  

• Navigation actions – Buttons that navigate to the correct pages
  

• Expandable quick booking button on homepage
  

• Seat and ticket type selection UI
  

• Booking progression bar – Covers 5 key steps: movie → seat → food → payment → success

🔧 What’s Next ：

• Hamburger menu & sidebar implementation
  

• Sign-up flow with OTP verification animation
  

• Scene transitions – Top bars, bottom navigation, and smooth flow between screens
  

• Additional pages – Movies, location, profile, promotions
  

• Payment success animation
  

Flutterflow Progress:

A. Setting Up the Foundation of My App

Before jumping into the interaction and animations, I spent time preparing the foundational settings of the app in FlutterFlow. This preparation helped streamline the later development process and ensured consistency across all components.

I. Theme & Styling

Fig2.1 Theme & Styling

To maintain visual consistency with my Figma prototype, I imported the color palette directly from my design. The primary color is a vibrant orange, supported by blue, light yellow, and utility colors such as green for success, red for error, and amber for warnings.

II. Typography

Fig2.2 Typography

I selected two fonts:

• Amaranth – used for headings with a more expressive and friendly tone

• Montserrat – used for body text and UI elements due to its clean readability

I also defined the font sizes and weights to ensure clarity and ease of application across the app.

III. Design System & Theme Widgets

To speed up development and ensure design consistency, I created several Theme Widgets, including:

• CTA Button

• Card UI

• TextField Input

This allowed me to reuse these components throughout the app without redefining styles every time.

IV. Media Assets

Fig2.3 Media Asset

Lastly, I prepared and uploaded all the essential media assets, such as:

• LFS Cinema branding logo

• Background image

• Movie posters

• Icons for tickets, wallets, food, QR, etc.

• Food images for the concession selection

Having these ready in the media library made it faster to build the UI and assign visuals to relevant components.

V. Storyboard & Structure Overview

Fig2.4 Storyboard

After finalizing the theme setup and preparing the base components, I moved on to building the complete UI flow (Storyboard) and defining the page architecture of the LFS Cinema App in FlutterFlow. My goal was to fully realize the MVP with a smooth and intuitive booking journey.

The storyboard outlines the user journey from the welcome screen to registration/login, quick booking flow, seat and food selection, cart and payment, and finally the confirmation and success screen. This reflects the full quick booking process that forms the core of the MVP.

Fig2.5 Pages & Compoenents

I used a mobile resolution of 393 x 852 px, a common size that ensures the layout looks natural and responsive on most smartphones.

I created around 18 pages in total, including:

• Functional pages (e.g. Home, QuickBooking, SeatSelection)

• User flow pages (e.g. Login, SignUp, OTP verification)

• Feedback animations (e.g. Loading screen, Payment success)

• Booking steps (e.g. CartDetails, Checkout, Voucher, Payment)

Fig2.6 Components and Pages

To improve reusability and consistency, I developed several custom components, such as:

• Seats – seat selection interface

• TimeSelector / DateSelector – for booking logic

• QuickBookingBtn – collapsible booking shortcut

• CartDetailsPopOut / LoginBottomSheet – pop-up panels

• HamburgerMenuComponent – side menu structure

• Cards – movie, voucher, and ticket summary cards

These components helped me maintain modular design and made the UI easier to scale and manage.

B. Page Design

After finalizing my Figma prototype, I began implementing each screen in FlutterFlow. This stage focused heavily on structure and layout, using basic widgets like Container, Row, Column, and Text to bring the designs to life. The Widget Tree on the left was incredibly helpful for keeping things organized and manageable.

1. Splash & Loading Screen

Fig2.7 Loading Screen

I translated each layout from Figma to FlutterFlow as closely as possible, maintaining hierarchy and reusability. While FlutterFlow offers built-in widgets like the ProgressBar, I found it too limiting for my visual style, so I opted to create my own version from scratch.

Creating a Custom Progress Bar

Fig2.8 Progress Bar

Instead of using the default progress bar, I built my own using:

• A Row widget that holds multiple Containers.

• Each container acts as a step in the progress bar.

• I defined a local state variable called loadingPercent that gradually increases on page load.

• The containers' colors change based on that value using a conditional color logic (If/Then/Else).

• I also bind the loadingPercent to a Text widget, so users can see the percentage increase in real time.

This method gave me full control over the visual appearance and dynamic behavior, allowing the loading bar to feel more on-brand and animated rather than static.

2. Login & Sign Up Page

Fig2.9 Sign up & Login

In designing the login and sign-up flow, my main focus was clarity, flexibility, and modularity. I ensured that the page layout stayed consistent with my brand's tone while providing users multiple authentication options.

Using Rich Text for Enhanced Display

I chose Rich Text instead of regular Text widgets for areas with multiple styles in one sentence (like the footer message). This allowed me to:

• Emphasize certain words with color and font weight

• Use tap triggers for embedded links

• Maintain text responsiveness and styling harmony

Fig2.10 Bottom Sheet

The login button action uses FlutterFlow’s Bottom Sheet component to display a clean and interactive login pop-up:

• Triggered via On Tap → Bottom Sheet: LoginBottomSheet

• Configured height at 700px, draggable, and dismissible by tapping outside

• A transparent overlay adds depth and focus to the modal

• Supports multiple login options: Google, Facebook, Apple, and email login

This aligns with modern UX practices and FlutterFlow’s recommendation for layered modal behavior

By setting the login form as a reusable component, I can call it from other screens without rewriting the structure. This modular approach helps with scalability and future maintenance, consistent with FlutterFlow’s component-first design philosophy.

3. Homepage

Fig2.11 Homepage

Next comes the homepage, which consists of several main parts: the hamburger menu, LFS logo, and QR code at the top; followed by a movie poster carousel, sections for “Now Showing” and “Coming Soon” movies, and below that, areas for membership and promotions. The bottom navigation bar is still in progress.

Fig2.12 Quick Booking Button

One of the more technically challenging features here was the draggable button that can slide in and out from the side of the screen. To achieve this, I created a component and used conditional visibility tied to a boolean state variable. The button’s border radius and arrow direction also dynamically change based on the same state.

To keep the homepage modular and manageable, I also converted key sections into components—including the carousel for featured movie posters at the top. I originally wanted to make the carousel auto-slide, but FlutterFlow currently doesn’t support that natively.

Fig2.13 Homepage

Below the carousel, I implemented a TabView that lets users toggle between “Now Showing” and “Coming Soon” movie lists. These lists are scrollable and designed to showcase multiple movies in a compact, accessible layout.

Finally, users can tap the Quick Booking button to jump straight into the core MVP booking flow, making the process fast and streamlined from homepage to confirmation.

4. Quick Booking Page

Fig2.14 Quick Booking Page

The next section is the Quick Booking page. At the top, users will see a home button and a prominent “Quick Booking” title. Below that are the date selector, cinema location, movie selection, and showtime options. The “Select Seat” button at the bottom remains disabled until both a date and a time are selected.

Fig2.15 Component in Quick Booking Page

Most elements on this page are built as components to make state control easier. Instead of using a boolean, I implemented string-based conditions with “equal to” logic to track user selections. Once selected, the active item is highlighted in light yellow. The showtime options are placed in a scrollable row, allowing users to swipe through available times.

Fig2.16 Comparison

When all required details are selected, the “Select Seat” button becomes clickable, visually indicated by the light yellow highlight. The change is clearly visible in the comparison images.

5. Seat Selection & Ticket Type

Fig2.17 Seat Component

On the Seat Selection and Ticket Type pages, I first designed the seat layout inside a component. The progression bar at the top updates accordingly — once this step is completed, the indicator becomes checked and highlighted in light yellow.

Fiog2.18 Seat Selection and Ticket Type

Movie details such as title, time, and cinema location are displayed prominently at the top of the screen. After selecting a seat, users can tap the button to proceed to the ticket selection screen. Ticket types — Adult, Children, Students, and Seniors — are chosen using plus/minus buttons. If no ticket is selected or the combination is invalid, the “Next” button remains disabled.

6. Food & Beverage and Cart

Fig2.19 Food Category

Fig2.20 Food

Next comes the Food and Beverage page. Upon entry, the progress bar advances to the next step. Users can select from categories (e.g., Promotions, Top Sellers) at the top, then scroll through the items below. Once an item is selected, the “Add to Cart” button becomes active and leads to the next step.

Fig2.21 Cart Pop up

Finally, a cart summary panel slides up from the bottom — I limited its height to around 500px to reduce blank space. It displays a detailed breakdown of the booking: seat info, food & drink choices, and processing fees, along with a “Check Order Summary” button for final review.

7. Checkout Page & Vouncher

Fig2.22 Checkout

Fig2.23 Progress bar

Now we’ve reached the final stage: payment. After reviewing the cart, users are shown the total sum and a breakdown of all charges. You can also see the changes in the progress bar—both in parameters and color—as it updates dynamically. I used currentStepIndex with an integer value to determine the current step, so that the highlighted yellow color and checkmark indicators appear accordingly.

Fig2.24 Vouncher

At this point, users can also redeem vouchers. Only one voucher can be selected at a time—when a second voucher is tapped, it automatically replaces the previous one. A visible orange border and tick icon provide clear feedback on the selected option. Once applied, the discount appears in the checkout panel in green for easy visibility.

8. Payment & Animation

Fig2.25 Payment

The final page is the payment screen, which offers several payment options: FPX, credit cards, LFS Wallet, and e-wallets. The selected method is highlighted, and the "Proceed to Payment" button becomes active. At the top, the progress bar reflects the final stage of the process.

Fig2.26 Animation of payment

As for the animation, it begins playing automatically and transitions to a confirmation button once the payment is successful, allowing users to view their ticket. These animations were part of the final tasks, and I used visibility conditions to control when each element is shown based on state.

Submission

Flutterflow LFS Cinema App in Run Mode: https://app.flutterflow.io/run/JlW0rCsAKPY24FE9cGuG

Publish to Web Link: https://lfscinema-guoying.flutterflow.app/

Walkthrough Video:

Presentation Video:

---

Reflections

Experience

Using FlutterFlow was a completely new experience for me. At first, I found many of its features confusing and unintuitive. I had to keep changing my approach and referring to the official documentation just to get things to work. Compared to traditional coding or Figma design, FlutterFlow felt quite restrictive, as if I was building within a rigid template.

Observation

The project started from a Figma design, and over time—from Application 1 to Task 1 and 2 of Application 2—we gradually included animations and visual improvements. However, translating that design into FlutterFlow proved challenging. For example, built-in components like the progress bar and tab view were too rigid in appearance, and I couldn’t customize them the way I wanted. In the end, I chose to build my own components that better matched my style.

Findings

As I worked through each part—like the tab view and drawer—I initially felt they were overwhelming. But through exploration and trial-and-error, I found that using conditional visibility and simple logic could help create more flexible designs. While FlutterFlow offers decent documentation, it still requires further exploration and creative thinking to fully realize custom features.