App Design 2: Final Submission
Michael Chan Henn Loong / 0363611
Application Design 2 / BA of Design (HONS) in Creative Media / Taylor's University
Final task- Final Submission
INSTRUCTIONS
FlutterFlow Final Task Report
Introduction
For my final task in FlutterFlow, I focused on implementing all the interactions, animations, and functions necessary to make my app feel complete. This report outlines the pages I worked on, the challenges I faced, and what I learned during the process. It also includes reflections on how I could have approached the task better and the takeaways from using FlutterFlow as a design and development tool.
Welcome Page
I began with the Welcome Page. Initially, I had planned to use a scale animation, but after previewing it in the browser, the scaling effect felt slightly off. I switched to a fade animation instead, which gave a smoother and more polished look. To improve the visual flow even more, I added a black container overlay at the start and adjusted the duration so the screen doesn't just “pop in” suddenly. This added subtlety helps guide the user into the app experience more gently.
Onboarding Pages
The onboarding flow consists of five screens. I used slide left transitions with a 300ms duration between each screen for a smooth and intuitive experience. When transitioning from onboarding to either the Log In or Sign Up screens, I applied a slide up animation, which signals a change in the flow direction and emphasizes progression.
Log In & Sign Up
These screens were more technical compared to others. I had to relearn how to set up local state variables, both strings (for email and password) and booleans (for state changes). I didn’t note everything down during Mr. Razif’s Firebase lecture, so I had to dig around and figure out an alternative method. Eventually, I managed to create functional login/signup pages that validate input and navigate users to the home page only when the credentials are correct.
Home Page
The Home Page features a fade animation on page load with an ease in-out effect lasting 2500ms. I used this slower transition to create a calm, professional entrance. I also set the initial opacity to 0 and final opacity to 1 for a clean appearance. In the "Popular" section, I applied a shimmer animation to help highlight this area and make it stand out from other content.
Search Page
The Search Page was the most challenging. I initially wanted to make the buttons change color on selection, but I struggled to get it working properly. As a workaround, I set an on action trigger for the buttons, so when a button is tapped, it shows a basic color change to blue. I also had to define a separate on tap widget animation to make this function.
While not perfect, this workaround at least gives the user a visual indication that something was selected which is essential for usability.
Search Result Page
This page didn’t require many changes. It's a transition page that connects the Search Page to the Game Description, so I kept it simple to maintain clarity and performance.
Game Description Page
To make this page visually engaging, I added a shimmer animation to the information container. This subtle animation draws the user’s attention to key details like the game title, description, and other important content.
Payment & Success Pages
The Payment page uses the same method as the login screens: I defined string and boolean variables to manage the user input. Once payment is successful, the user is directed to a Success page that includes a Lottie animation and a shake animation applied to the success text. This adds a fun and celebratory effect, reinforcing that the payment process was completed.
Final Submission Presentation
Reflection
Reflecting on this final task, I realize that I didn't prepare or plan my time properly. If I had managed my schedule better and taken more detailed notes during lectures (especially the ones on Firebase and variable handling), I believe I could have built something more impressive. Some of the animations and interactions — especially in the Search Page — didn't turn out exactly as I wanted, but I still learned a lot in the process.
That said, FlutterFlow is a really fun and powerful tool. I genuinely enjoyed working with it, even when things got confusing. It’s great for visual learners like me, and it has helped me better understand app logic, page transitions, and user interactions. I’m proud of the effort I put in and the results I achieved.
This task pushed me to experiment, troubleshoot, and solve problems on my own — which is the most valuable part of the learning experience. I feel more confident now in using FlutterFlow, and I look forward to using it in future projects with better planning and deeper understanding.
Comments
Post a Comment