Labels

Application Design II / Lectures

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

Chang Wing / 0367807 

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

Lectures 


TABLE OF CONTENTS

        - Week 1
        - mgmgsmlkdfsjna





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



Week 10

Microinteractions

Create 2 pages: productlist & productdetails

productlist -> productdetails (page navigation)

Add a smooth transition animation between the two pages (e.g., a Hero animation for the product image or card).


Figure 2.15 Select image in 'productlist' page to add hero animation


Figure 2.16 Create hero tag 'shoe01'


Figure 2.17 Hero tag 'shoe01' created


Figure 2.18 Add hero animation to the corresponding image in 'productdetails' page


Figure 2.19 For 'productlist' page, select the container / image,
add action: tap once > navigate to > productdetails


Pass parameters


Figure 2.20 Select the ListView and create a new component


Figure 2.21 Rename component to 'shoe01' and toggle on 'use hero animation'


Figure 2.22 Set hero tag to 'shoe01'



Figure 2.23 Double click the component and enter this view and add action > navigate to > productdetails


Figure 2.24 Choose Transition Type


Figure 2.25 Define Parameter for productdetails page


Figure 2.26 Rename parameter name to 'shoe01'


Figure 2.27 Type > set to 'ImagePath'

Figure 2.28 Image name > set to 'shoe01'


Figure 2.29 Select image in productlist page

Figure 2.30 Then click 'Pass' parameter button


Figure 2.31 Can set transition duration


Figure 2.32 Can go to Settings > App Details > Change Default Transition Type & Duration (Optional)


Figure 2.33 Go to lottiefiles.com, search the lottie resources you want > click 'download' > handoff 


Figure 2.34 Choose 'Lottie JSON'


Figure 2.35 Copy embed URL into flutterflow


IF COPY EMBED URL into flutterflow still DOESNT WORK, try COPY ASSET LINK into flutterflow, if still DOESNT WORK, use this way:


Figure 2.36 Go Download > Download Lottie JSON


Figure 2.37 Search widget 'LottieAnimation' and drag into a blank page


Figure 2.38 Set animation source to 'Asset' > upload the
downloaded Lottie JSON file to 'Asset Animation' and REMEMBER TO RENAME this LottieAnimation widget to 'LottieAnimation' (Whatever name you want)


Figure 2.39 Add action > On Tap > Search 'LottieAnimation' for Action


Figure 2.40 Choose LottieAnimation > 'LottieAnimation' 

Figure 2.41 Toggle on Allow Play/Pause to play or stop the animation in play / preview mode



Week 11

Simple Search Bar


Figure 2.42 Week 11 - Simple Search tutorial.


Week 12

Navigation & Routing


Figure 2.43 Replace Route in Flutterflow



Figure 2.44 Replace Route in Flutterflow feature explanation


This means that, in Figure 2.44, when Replace Route is enabled for the "To Product List" button on the MyCart page (Figure 2.45), pressing the Back button from the Product List page will not return the user to the MyCart page. Instead, it will navigate back to the Week12 page, because the MyCart page was replaced in the navigation history.

Note: This behavior does not work in Preview Mode, but it works correctly in Test Mode because Preview Mode does not fully simulate the app's navigation stack and back navigation history, whereas Test Mode uses the actual runtime navigation behavior.



Figure 2.45 Storyboard of Week12 Page



Figure 2.46 Replace Route on 'To Product List' button

Figure 2.46 demonstrates how to implement a Share button in FlutterFlow using the device's native share sheet. This allows users to share content through installed applications such as WhatsApp, Instagram, Telegram, Messages, Gmail, and other compatible apps.

To configure the feature:

  1. Select the Share button.
  2. Navigate to Actions → + Add Action.
  3. Search for and select Share.
  4. Configure the content to be shared, which can include:
    • Text
    • URL
    • Both text and URL

For example:

  • Text: Check out this page!
  • URL: https://yourwebsite.com/product/abc123

When the user taps the Share button, FlutterFlow opens the device's native share sheet, allowing the user to choose an application to share the content.

Alternatively, if each product has its own dedicated page, a dynamic link can be shared instead. Examples include:

  • https://yourapp.com/product/12345
  • https://yourapp.com/product?id=12345

The Share action can then be configured as follows:

  • Text: This is the product ❤️
  • URL: ThisProduct.shareLink

Using a dynamic link ensures that recipients are directed to the specific product or page associated with the shared content.

Note: The Share feature cannot be tested in FlutterFlow's Preview Mode. It only functions correctly after the application has been deployed and tested on a physical mobile device as it relies on the device's native sharing capabilities.


Figure 2.47 Share button feature in Flutterflow 



Figure 2.48 Launch URL button feature in Flutterflow



Figure 2.49 Launch URL Protocols & Schemes (Provided by Ms. Nurul)



Bottom Sheet

Flutterflow tutorial: https://docs.flutterflow.io/concepts/navigation/bottom-sheet/

Opening Bottom Sheet:
  1. First, create a bottom sheet component.
  2. Select the Widget (e.g., Button) from where you want to open the bottom sheet.
  3. Select Actions from the Properties panel (the right menu), and click + Add Action.
  4. Search and select the Bottom Sheet (under Widget/UI Interactions) action.
  5. To open the bottom sheet, select Show.
  6. Select Component as the component you created for the bottom sheet
  7. (Optional) set the Height value. You should set the height if you want the bottom sheet to appear only up to some portion of the screen.
  8. You can set the Background and Barrier Color for the bottom sheet.

Figure 2.50 Create a blank page for the button that triggers the Bottom Sheet


Figure 2.51 Add component, in this case, I used the template provided by Flutterflow


Closing Bottom Sheet:
  1. Select the Widget (e.g., Button, ListTile, Container) on which you want to add the action.
  2. Select Actions from the Properties panel (the right menu), and click + Add Action.
  3. Search and select the Bottom Sheet (under Widget/UI Interactions) action.
  4. To close the bottom sheet, select Dismiss.
  5. If you want to return a value from the current bottom sheet, enable the Has Value toggle and pass the value by setting its Data Type and Value Source.

    i) If you enable the Has Value option, you must come back to the action that opens this bottom       sheet and provide the Action Output Variable Name. This will be used to retrieve the value       from the bottom sheet.

    ii) Now you can use the Action Output Variable Name to get the data.

Figure 2.52 Add a dismiss button



Figure 2.53 Week12 Bottom Sheet Tutorial Outcome in Flutterflow






REFLECTION

Tdsfs







Labels:

Comments

Post a Comment