Labels

Application Design II / Lectures

22/02/2026 - ??/??/2026 (Week 1 - Week ??)

Chang Wing / 0367807 

Application Design II / Bachelors of Design (Honours) in Creative Media / Taylor's University

Lectures 


TABLE OF CONTENTS

        - Week 1
        - 


(Updated!)


INSTRUCTIONS


Figure 1.1 Module Information


LECTURES


Week 1

Module Introduction 

For the first week, Ms. Nurul introduced our initial task for the module: to reflect on and identify issues in the hi-fi app we developed in Application Design I. The goal is to refine and improve these issues further in Application Design II, building on our previous work rather than starting from scratch.

We also carried out an exercise using AI to review our past UI designs. By applying Generative AI, we were able to receive a more professional-level critique.

The prompt we used was:

"I am a student and this is a UI design I created for a previous project. I want to improve it. Act as a Senior UI/UX Designer. Please analyze my screenshot and give me feedback on:

1. Visual Hierarchy: Is it clear what the user should look at first?

2. Accessibility: Are the colors easy to read (contrast) and are the tap targets (buttons) large enough?

3. Modern Aesthetics: Does it look current, or are there elements that feel outdated?

4. One Big Fix: What is the #1 thing I should change to make this look like a professional app?"

Personally, I think the AI was actually really useful. It picked up on more issues than the feedback I received last semester. Instead of just giving general comments, it broke down almost every element in the design. It also didn't just point out problems, but suggested solutions as well, along with some industry-level tips that I haven't really learned in class before (Figure 2.1).



Figure 2.1 Prompting AI to give feedback (22/04/2026)


After that, Ms. Nurul let us play a Kahoot quiz to test our understanding of UI / UX practices and fun facts. It was very exciting, we also picked up a lot of new tips through the questions. The winner reveiced a packet of Duit Raya from Ms. Nurul!

Figure 2.2 Kahoot Quiz (22/04/2026)





Week 2

Flutterflow Tutorial

Ms. Nurul taught us how to use FlutterFlow. First, she introduced the UI hierarchy structure, specifically how elements are arranged in a Row (Row → Button → Text) and how UI components are placed and organised within this structure.

Figure 2.3 FlutterFlow Row Hierarchy Structure Demonstration (29/04/2026)


To create an "Add Quantity" button where the number increases when pressed, we selected the button (Icon01 in Figure 2.4) and navigated to Actions in the right side toolbar. We then set the field type to Integer, chose the update type as Increment/Decrement, and changed the increment value accordingly.

Figure 2.4 Configuring Button Action for Quantity Increment (29/04/2026)


Next, we selected the quantity text "1". By clicking the orange icon next to the Text property on the right-side toolbar, we set the type to String, selected Page State, and changed the Default Variable Value and UI Builder Display Value.

Figure 2.5 Configuring Quantity Text Binding Using Page State in FlutterFlow (29/04/2026)



Week 3

Application I Project Review & Approval

This week, we presented our application’s Figma UI design to Ms. Nurul and received approval to proceed with development in Flutterflow. We also discussed the main user flow and identified the CRUD functions (Create, Read, Update, Delete) for the application.



Week 4

FlutterFlow Firebase Setup Tutorial For Login & Logout

1. Create & Connect Firebase Project
  • Go to Settings & Integrations > Firebase in Flutterflow
  • Click Create Project
  • Select region: Singapore (best latency for Malaysia users)
  • This creates and links your Firebase project automatically

2. Generate Configuration Files
  • Click Generate Config Files
  • If error happens: Refresh page
  • Try again (this is common in FlutterFlow)
Figure 2.6 Generate Config Files


3. Enable Firebase Services

Go to Firebase Console

A. Authentication
  • Go to Authentication > Sign-in method
  • Enable: Email/Password (most common)
  • Google (optional)

B. Firestore Database

Create database (Start in production or test mode depending on project stage)
You do NOT manually store passwords (Firebase Auth handles this)


4. FlutterFlow Authentication Setup
  • Go to Settings & Integrations > Authentication
  • Enable Firebase Authentication
  • Set: Entry Page (e.g. LoginPage)
  • Logged In Page (e.g. HomePage)

5. Action Flow Editor


A. Sign Up Button Setup
  • Button → Action Flow Editor
  • Add Action 👉 Authentication > Create Account
  • Then: Email + Password inputs
  • On success: Navigate to Home Page
  • (Optional) Create Firestore user document
Figure 2.7 Add Action


B. Login Button Setup
  • Select your Login Button
  • Go to Action Flow Editor
  • Click + Add Action
  • Choose 👉 Authentication > Log In
  • Then configure: Email field → your email TextField
  • Password field → your password TextField
  • Success Action → Navigate to Splashscreen / Home Page
  • Failure Action → Show Snackbar / error message
Figure 2.8 Action Flow Editor


C. Optional (Recommended)
  • After account creation: Add Action → Firestore > Create Document
  • Collection: users
  • Fields: uid = currentUserUid
  • email = userEmail
  • created_time = current timestamp
Figure 2.9 Create a collection > Add field


6. Final check
  • Make sure: Firebase Auth is enabled ✔
  • Action Flow is connected to login/register buttons ✔
  • Entry/Logged-in pages are set ✔
  • Google/Email provider enabled in Firebase Console ✔
Figure 2.10 Firebase Authentication showing registered user accounts
for verification of user sign-up success




Week 5

FlutterFlow for Create & Update

Phase 1: Setting up the Zero Page

Step 1: Create a Blank Canvas

1. Open the Page Selector (the overlapping squares icon on the left menu).

2. Click + Add Page.

3. Ignore the templates. Click Create Blank at the top right.

4. Name your page something obvious, like DatabaseTestPage, and click Create.

Step 2: Add the Basic UI Ingredients

1. Open the Widget Palette (the plus icon on the left).

2. Search for RadioButton and drag it onto your blank page.

3. Search for a Button and drag it just below your RadioButton. Change its text to "Send to

Database".

Step 3: Define the Test Options

1. Click on your RadioButton widget to select it.

2. Look at the Properties Panel on the right. Find the section labeled Define Options.

3. Manually type in 3 test options (e.g., Oat Milk, Almond Milk, Whole Milk). We are

hardcoding these just for the test to keep things simple.


Step 4: Database Structure (Firestore)

Before building the UI backend, you need to structure your data. Go to your Firestore tab in

FlutterFlow and set up a new collection named 'cart'

In cart Collection

Stores the items a user intends to buy, tied specifically to their authenticated account.

1. user_ref (Document Reference > users)

2. selected_milk (String)

3. selected_size (String)

4. selected_temp (String)

5. quantity (Integer)


Phase 2: The Routing Bridge (Crucial!)

For any database write to work, Firebase needs to know who is writing the data. If you launch

this test page directly without logging in, the action will crash because the user is "null". We

need to force a login first.

Step 5: Update the App Routing

1. Go to Settings & Integrations (the gear icon on the left menu).

2. Navigate to App Settings > Authentication.

3. Ensure your Entry Page is set to your Login/Signup page (make sure can navigate to the DatabaseTestPage)

4. Change your Logged In Page to your new DatabaseTestPage.

Why? Now, when you run Test Mode, you will log in first, and the app will automatically drop you

onto this test page with an active user session!

Phase 3: Wiring the Action

Now we tell the button to grab the text from the Radio Button and push it to Firebase.

Step 6: The Create Document Action

1. Select your "Send to Database" Button on the canvas.

2. Open the Action Flow Editor on the right-side panel.

3. Click + Add Action.

4. Navigate to Backend/Database > Firestore > Create Document.

5. Set the Collection to your target collection (e.g., cart).

Step 7: Map the Fields

Click + Add Field to add the following two essential fields:

● Field 1: The User Reference

○ Field Name: user_ref (or your specific user reference field)

○ Set variable > User Reference (users ref)

○ Source: Authenticated User > User Reference

● Field 2: The Data Payload

○ Field Name: selected_milk (or your specific string field)

○ Value Source: From Variable

○ Source: Widget State > select your RadioButton

Phase 4: Execution & Verification

Check the Bug icon at the top right of FlutterFlow. If it shows 0 errors, you are ready to proceed!

Step 8: Run the Test

1. Click the Lightning Bolt icon at the top right to start a fresh Test Mode session.

2. When the app loads, log in using a test account.

3. You will automatically land on your DatabaseTestPage.

4. Select one of your milk options on the radio button.

5. Click "Send to Database".

Step 9: The Final Check

Open a new browser tab and navigate to your Firebase Console. Go to your Firestore

Database and click on your cart collection.

You should see a brand new document sitting there, containing your User's ID and the exact text

you selected from the radio button (Figure 2.12). If you see this, you have successfully mastered

frontend-to-backend data binding!

Figure 2.11 Tutorial outcome

Figure 2.12 Firestore > cart Collection > Manage Content



Week 6

Holiday, no lecture.




Week 7

FlutterFlow for Read & Delete

Now that we know how to create and store data in Firebase, it's time to bring that data back into our app so users can view it (Read) and remove it if they change their minds (Delete).

In this tutorial, build a simple Cart Viewer page. This page will retrieve all cart items belonging to the logged-in user from Firebase and display them in a scrollable list with a trash can icon next to each item for deletion.

Prerequisites

Before starting this tutorial, make sure completed the Writing Data to Firebase tutorial. You should also have at least one document saved in your cart collection; otherwise, nothing will appear when testing.

Phase 1: Setting Up the UI List

Step 1: Create the Viewer Page

  1. Open the Page Selector and click + Add Page.
  2. Select Create Blank, name the page CartViewerPage, and click Create.
  3. Open the Widget Palette, search for AppBar, and drag it to the top of the page.
  4. Set the title to "My Cart".

Step 2: Build the List Structure

  1. Drag a ListView onto the page.
    A ListView is required whenever you want to display multiple items from a database in a scrollable format.
  2. Drag a Container inside the ListView.
  3. Set the Container's width to Infinity (∞) and its height to approximately 60px.
  4. Drag a Row widget inside the Container.
  5. Inside the Row, add:
    • A Text widget (to display the selected milk choice).
    • An IconButton.
  6. Select the IconButton and change its icon to a Trash Can.

Phase 2: Reading the Data (Backend Query)

At this stage, the ListView only contains a single empty row. We now need to connect it to Firebase so FlutterFlow can automatically generate a row for every document found in the database.

Step 3: Query the Collection

  1. Select the ListView from the Widget Tree.
    Make sure you select the ListView itself, not the Container inside it.
  2. Open the Backend Query tab on the right-side panel.
  3. Click Add Backend Query.
  4. Set Query Type to Query Collection.
  5. Select the cart collection.
  6. Set the query result type to List of Documents.

Step 4: Filter for the Logged-In User

We only want to display the current user's cart items.

  1. In the Backend Query menu, click + Filter.
  2. Set:
    • Field Name: user_ref
    • Relation: Equal To
    • Value Source: From Variable → Authenticated User → User Reference
  3. Click Confirm.
  4. If a warning appears about generating children dynamically, click Confirm/OK.

You should now see multiple placeholder rows appear in the editor.

Phase 3: Binding Data to the UI

Step 5: Display the Database Text

  1. Select the Text widget inside the ListView row.
  2. In the Properties panel, click the Data Binding icon next to the Text field.
  3. Select cart Document.
  4. Choose the field you want to display (for example, selected_milk).
  5. Click Confirm.

The Text widget is now connected to your Firebase data.

Phase 4: Creating the Delete Action

When a user clicks the trash can icon, the corresponding Firebase document should be removed.

Step 6: Configure the Trash Can Button

  1. Select the Trash Can IconButton.
  2. Open the Action Flow Editor.
  3. Click + Add Action.
  4. Navigate to:
    Backend/Database → Firestore → Delete Document
  5. For the Reference field, click the Data Binding icon.
  6. Select:
    cart Document → Reference
  7. Click Confirm.

The delete action is now linked to the correct database document.

Phase 5: Testing and Verification

Step 7: Route and Test

  1. Go to:
    Settings & Integrations → App Settings → Authentication
  2. Set the Logged In Page to CartViewerPage.
  3. Launch a fresh Test Mode session by clicking the Lightning Bolt icon.
  4. Log in using your test account.

Step 8: Verify the Final Result

Once the page loads, you should immediately see the cart data stored in Firebase displayed in a scrollable list.

Try clicking the Trash Can icon next to an item. The item should disappear instantly from the interface and be permanently removed from your Firebase database.

Congratulations! You have successfully implemented both Read and Delete functionality in FlutterFlow using Firebase Firestore.

Figure 2.13 View Cart Button Navigate To My Cart



Figure 2.14 Delete








REFLECTION

Tdsfs







Labels:

Comments

Post a Comment