Application Design II Task 3
Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media
MMD 60204 | Application Design II
Week 8 — Week 11
Task 3: Interactive Component Design & Development
These are the jump links to each part of this portfolio
Instructions
Mr Razif Mohammed, my section lecturer for the Information Design module for this short semester, gives us a heads-up on the upcoming tasks and exercises.
Description
"Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app."
Requirements
1. Flutterflow app building
Work Process
Pages Planning
Total pages created |
Widget Trees
Homepage building with wrap, column, and row widgets to align the elements |
I also explored the free templates from the Flutterflow community to search for the specific features like how to set up a dialog box (pop-out panels) and I found the ways to use the components and set page parameters to them in order to link the button to show components like confirmation page, Payment authentication with PIN, filter page, email statement etc.
Components as dialog boxes |
To allow the single selection on multiple options, like the payment card selection during top up, as well as the filter page on transaction history, I've taken reference to use the conditional builder to toggle the visual icon button between active and inactive.
History filter selection |
This is where I've also used the local page state variables to control the icon feedback change.
Local page state variables |
Firestore data manager
User Information Data Schema |
This way, unique data will be recorded according to individual accounts, and this information will be retrieved and shown on various pages like the homepage, profiles, and the payment page (PIN)
User name on the homepage |
Account information on the profile page |
Limitations
Complete screen responsion
Tab bar animation and design
Some of the UI designs don't adhere to the original designs, such as the animation aspects on click on my tab bar.
![]() |
Difference between intended design and workable design |
Pie chart design
Another UI/graphic that couldn't be added as the original design is the pie chart on the transaction expenses page, where the chart widget provided by Flutterflow isn't flexible enough to adjust the small details.
Intended design |
Last design resort (using the chart widget) |
QR scanner
Finally, as in Flutterflow, there is no widget for a QR code scanner to be added to my Scan & Pay features. Even if I try using the custom widget code using the Dart (searching online to use a simple QR scanner), the results it provides me are not up to my liking.
However, I'm still looking for a solution to this issue with the QR scanner. For now, I will use the tap function on the screen in the Scan & Pay page to mimic the user's action of scanning the QR code.
Further research on the official Flutterflow website using the Scan QR code action, but I need to find out how to enable QR code scanning on page load. Maybe just to mimic a successful QR code scanning, the output variable name needs to be used, and conditions are required so that the value in the QR code will be recorded and compared to the condition to enable navigation to the payment page.
Official Flutterflow guide |
Submission
- Adjust screen dimensions 440 x 956 px or larger (mobile phone size) for a better viewing experience.
- You may need to use the inspect mode in Google to scale the screen size, as I disable the responsive UI for tablet and desktop views, if Flutterflow's Canvaskit isn't working.
Inspect mode to adjust screen dimensions |
Flutterflow Project File
Editor access has been granted to Mr Razif, my lecturer.
My reflections
Working on Task 3 gave me mixed feelings throughout the process. There were moments of joy whenever something worked exactly as I intended in FlutterFlow, and seeing the layouts come together or the logic run correctly was genuinely satisfying. However, there were also times of frustration, especially with how indirect some functions in FlutterFlow are. Certain components that looked simple in design took me far longer to build than expected.
One of the biggest challenges was not being able to fully follow my intended design. The QR scanner functionality and the tab bar design were particularly disappointing because the results didn’t meet my expectations despite multiple attempts. It felt like a real bummer, but I’m still determined to keep looking for workarounds that bring the final app closer to my original concept.
Overall, the experience had both highs and lows. Some parts, like aligning icons and text using widgets such as wrap, column, and row, felt easier because of my prior experience with HTML. But there were also steep learning curves in other areas that pushed me to keep adapting. Despite the setbacks, I’m glad to see the MVP shaping up and I’m motivated to keep refining it.
Comments
Post a Comment