Application II （Final Project）
Task 3：Flutterflow Final
Ding Jiaqi/0379388
Application II/ Bachelor of interactive spatial design
Next, we will officially enter the application design phase of the final project. I will continue to refine and develop the content that was previously created in the low-fidelity prototype on Taobao.
Login and Sign up
The first time Dr. Razif Mohanmed reviewed my assignment, he pointed out that there were too few animations in the app I created. He suggested that I could add an animation to the logo, so I created this flip animation.
First, add a Flip animation to the logo image using the animation panel on the right, and configure the animation duration and easing curve (e.g., 600ms, Ease In Out). Then, go to “Actions > On Tap” and add a Widget Animation action, select the logo component, and set it to “Start Animation.” This way, when the user taps the component, a card-like flip animation will be triggered.
Using the same method as above.
Product Detail Page
Initially, I planned to show a pop-up message saying "Added to favorites" when a user adds an item to their favorites list. However, I realized that changing the icon from an outline to a filled version provides a non-intrusive experience, allowing users to continue interacting with the app smoothly. It also lets users easily confirm the favorite status when they return to the page.
Use a Stack to overlay the outlined and filled icons. Create a page state variable (e.g., isFavorited, default value: false) to act as a toggle. Set a visibility condition for the outlined icon: show it when isFavorited is false. Set a visibility condition for the filled icon: show it when isFavorited is true. Add an On Tap action that triggers an Update Page State action, toggling the value of isFavorited (true → false, false → true), enabling the icon to switch accordingly.
Deleting Items from the Shopping Cart
Effect: When a product is tapped, a confirmation dialog appears. Once confirmed, the item is removed.
We implemented this feature using a Callback Action by creating a separate “Confirm Deletion” dialog component with an action-type parameter that allows it to receive external instructions. When a user taps on a product in the shopping cart, the dialog appears and receives a specific instruction—such as hiding the selected item—enabling dynamic and reusable interaction.
Feature Panel Popup in Chat Page
Effect: When the "+" button next to the chat input is tapped, a feature panel slides up from the bottom.
Implementation: We used the standard Bottom Sheet feature by creating a “Feature Panel” component and assigning a Show Bottom Sheet action to the "+" button’s tap event, which displays the panel when triggered.
Tap the icon to enlarge
Effect: When the icon is tapped, it will enlarge.
Implementation: First, create two pages with scaling effects, then trigger the transition on tap.
Page transition effects (fade in and slide left/right)
Implementation: First, create two scaled pages, then trigger the transition on tap.
The above includes my initial work and the revised content after incorporating the Dr. Razif Mohanmend suggestions. With the Dr. Razif Mohanmend guidance, I continuously improved and optimized the project, ultimately completing the final project.
Presentation Link：https://youtu.be/GzRXG8cQ_1c?si=YD3JOT_odjQQ6Iou
Comments
Post a Comment