Application Design || | Final Project & E- Portfolio
07.07.2025 - 27.07.2025 Week 12 - Week 15
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Application Design II / Taylor's University
FINAL PROJECT & E-PORTFOLIO
The next things is a new one, where I explore the component features from flutter and create the filter and sort page on it. Once it was setup, I added bottom sheet action for the filter icon and adjust the background color value.
The next step is for the milestone plan, I create a new page state variable to show and hide the second milestone textfield. In the button I added action to set it true and for the current default, it should be set value as false.
User can still go back to the project details and I try to adding a warning message if user want to click place a bid button. The warning will show an animation and message that "You already place a bid".
For the edit bid page, I used the same bid form page and fill up the initial value for the properties.
For the retract, I designed the component pop up at first and applying same style like a warning place a bid, where I used boolean value.
After user click the retract, our bid is gonna gone and a notification would showen from top and then fade out.
I applied on what have been learned during week 8 exercises for firebase setup, log in and sign up button action. For the sign up, I added a new document field which are firstName and lastName from my collection. This serves as a save input so I can applied for the page that I want to display name.
To record the bid field, I setup a new firestore named bids and state the field name for amount, delivery days, proposal text, and milestones. For milestone I have tried to using data type but the result doesnt work, so I make the field manually one by one, with the total of 4 field.
After data store is showing, I added the variable for the view proposal page, edit page, and along with the manage page - my bids.
And then to clear all the data on the retract option, I added backend action to delete document. This would make all the data removed to showed a new one when user tried to type again.
Application Design II / Taylor's University
FINAL PROJECT & E-PORTFOLIO
TABLE OF CONTENTS
LETURES
WEEK 13
No Class (Lecturer Down of Flu) . Continue Working on The Project.
WEEK 14
This week is the final class session and Mr. Razif checking out our progress and give a feedback for our work.
INSTRUCTIONS
MIB BOOKLET :
FINAL PROJECT
Final Project & E-Portfolio
On this task, student Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.
Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathize with others within group settings, interact positively within a team and foster stable and harmonious relationships for productive teamwork. Reflective writing is part of the TGCP.
Requirements :
- Project Files & Video Walkthrough
- Online posts in your E-portfolio as your reflective studies
---
Task List Preview
From the task 3, I have done some of the page that I listed down below. For this final project, I will continue finished what needs to be done - MVP Features.
What has been done :
- Splash Screen Animation - Animate in Jitter ✔
- On Boarding 1,2,3 ✔
- Log In and Sign Up ✔
- Home Page - Explore and Access to Browse Project ✔
- Browse Pages - Front Only ✔
- Manage Page ✔
- Go to My Bids Page
- Social Page ✔
- Account Page - Front Only ✔
What yet need to be done :
- Browse a Project Page + Include Loading Animation
- Project Details & View Proposal Page
- Place a Bid Form
- View, Edit and Retract Bid
- Add Firebase and Data Store
- Additional Improvement on Other Pages
Fig 3.1 App Preview from Task 2 Week 06 01/06/2025
For this task, I aim to finish the MVP Features - Browse - Place Bid and Retract it. Beside that, I will added the back end authenticator for log in and sign up page.
 |
| Fig 3.2 Screen List for Final Project Week 13 16/07/2025 |
1. Browse a Project Page + Include Loading Animation
For this page, I added a search field, along with the filter icon that I custom it using icomoon. To build the project categories, I added listview widget and design it using container, column and row. After that, I just need to duplicate it and change the information.
 |
| Fig 3.3 Browse Page - 1 Progress Week 13 16/07/2025 |
 |
| Fig 3.4 Filter and Sort Page Week 13 17/07/2025 |
And then moving on to the part 2 browse page, it's gonna shown once user click the search field from previous page. I added a container to build the list card for recently viewed. Once it done, I experiment with the favourite toggle icons.
 |
| Fig 3.5 Browse Page -2 Week 13 17/07/2025 |
To do the toggle, it's different from the home page since I didn't have activate back end for this scenario, resulting on icon toggle state didnt activate, only just for showing lottie animation. I created the page state for this first and each icon should have different page state or else, 1 toggle could activate the rest of it.
And then, I implement a conditional action to set the if and else. If should have a true value and lottie animation while the else should have a false value for the toggle to go back on previous style (outlined).
 |
| Fig 3.6 Conditional Action for Toggle Favourite Week 13 17/07/2025 |
After the browse page 2, User need to type something and press enter for the text field or by fill in the filter and type in the apply button. This step would made user go to the loading page before the result come.
At my prototype from task 2, I used loading circle animation for the design, but on this time, I change it into lottie animation since I found it good and the look is match with my project card. Lottie animation sources can be found HERE.
 |
| Fig 3.7 Editing Component Color to Match with UI Design Week 13 18/07/2025 |
The last thing is to add a hover style for the container to guide user what project card they should click. To implement this, we need to create a local state variable and then add mouse region and change the fill color to conditional value.
 |
| Fig 3.8 Browse Page - Search Result Week 13 18/07/2025 |
2. Project Details & View Proposal Page
Once user clicked the project card, it's gonna go to the project details page. The page were divided into 2 part which are project details and view proposal. I'm using tabbar to design this page. For the title on top of it, I need to make it change when user click the second tab bar and to use it, I applied conditional action for the tab bar and the text widget. There were many trial and error experiment but it finally works at the end.
 |
| Fig 3.9 Conditional Action Tabbar Week 13 18/07/2025 |
 |
| Fig 3.10 Conditional Action for the Text Week 13 18/07/2025 |
The next step is to fill up the tab bar page. Following my prototype, I applied list view for the contents since it was long.
 |
| Fig 3.11 Project Details Page Progress Week 13 18/07/2025 |
 |
| Fig 3.12 Project Details Page Progress Part 2 Week 13 18/07/2025 |
For the final stage, I fill up the second tab bar, view proposal, by adjusting the padding for some other proposal card as shown below.
 |
| Fig 3.13 View Proposal - Proposal Card Week 13 19/07/2025 |
Final Proposal Page Look :, I added transition like slide and fade to implicate macro animation.
 |
| Fig 3.14 Final View Proposal Week 13 19/07/2025 |
3. Place a Bid Form
The bid page contains the form to be filled before user can click a place a bid button. I did make a change for the design due to limitation widget in flutter flow. The changes were on the days part, Initially it should be stepper but I changed it into just a normal text field.
Moreover, I want to make the forms like a real one where I can insert a range user can type for the bid amount. I kept trying but nothing works, so for now I just use boolean to show and hide the warning messages whenever user click the textfield. This serves to give user a clear instructions and prevent them from submitting invalid data.
 |
| Fig 3.15 Add Trigger for TextField Week 13 19/07/2025 |
 |
| Fig 3.16 Page Preview Week 13 19/07/2025 |
 |
| Fig 3.17 Add Another Payment Button Trigger Week 13 19/07/2025 |
For the processing bid loading animation, I grab the sources from lottie free animation also. I used the paper plane flying animation to show that our bid is processed to the server to be uploaded. Meanwhile for the success, I add checklist animation with confetti on it.
 |
| Fig 3.18 Lottie Processing Bid Animation (Sources : HERE) Week 13 19/07/2025 |
 |
| Fig 3.19 Success Animation (Sources : HERE) Week 13 19/07/2025 |
4. View, Edit and Retract Bid
I duplicate the project details page and set initially index into 1 so the tab bar 2 (view proposal) would showed first. For our proposal, It were designed different from other proposal. This is to make our proposal stand out more, ensuring the hierarchy on UI UX Principle. We were given 3 option for our proposal which are to view, retract and edit.
 |
| Fig 3.20 Page Progress Week 14 20/07/2025 |
 |
| Fig 3.21 Warning Component Design Week 14 20/07/2025 |
 |
| Fig 3.22 Added Component in Page and Set Visibility Condition Week 14 20/07/2025 |
 |
| Fig 3.23 View Proposal Page (Firebase Data Setup) Week 14 20/07/2025 |
 |
| Fig 3.24 Update Bid Information Week 14 20/07/2025 |
 |
| Fig 3.25 Retract Bid Week 14 21/07/2025 |
 |
| Fig 3.26 Retract Bid Notification Week 14 21/07.2025 |
5. Setup Firebase and Firestore
Once I have finished for all of the page along with navigation, I duplicate my file in case my project file got error in firebase trial. I made a list on which things I want to use firebase and firestore collection as shown below :
- Log In and Sign Up (tutorial setup like in class)
- Record First Name and Last Name in home page, account, and proposal when applying bid.
- Record Bid Field in Bid Form Page.
 |
| Fig 3.27 Sign Up Button Action Week 14 21/07/2025 |
 |
| Fig 3.28 In Page Preview Week 14 21/07/2025 |
 |
| Fig 3.29 Data Collection - Bids Week 14 22/07/2025 |
 |
| Fig 3.30 Action for Place a Bid Button Week 14 22/07/2025 |
 |
| Fig 3.31 Setup Variable Week 14 22/07/2025 |
 |
| Fig 3.32 Retract Action Week 14 22/07/2025 |
I added the input field in edit page initial value. Actually I plan to make update bid available by duplicate and replace the bid page but after trying several times, the bid information won't updated and it broke all the data updating system, So I didnt implement the features in order to make data works again.
Instead, users can retract and resubmit a bid if needed, which keeps the data structure simple and the user experience clear. The architecture allows bid editing to be added in future iterations without reworking the current flow.
Page Flow Overall :
6. Additional Improvement - Account Page
In account page, I added a new features under the settings which is log out, After user done exploring or want to try another user name, user can click the log out and sign up again.
 |
| Fig 3.33 Log Out Page Setup Week 14 21/07/2025 |
 |
| Fig 3.34 Storyboard Week 14 22/09/2025 |
FINAL OUTCOMES : FINAL PROJECT & E-PORTFOLIO
Added Mr. Razif as Editor in My Project :
 |
| Fig 3.35 Added Collaborator Week 11 07/07/2025 |
Published App in Web Version :
Notes : Please do right click - inspect and view in mobile size 393 x 852 / Iphone 12 Pro
Task Flow - Browse Project and Place a Bid :
1. Sign Up to Freelancer [Fill First Name, Last Name, Email, Password, Country and Checkbox]
2. You can view your name displayed in Home and Account. Now go to Browse and select Find a Project
3. Type Project : Graphic Design / Use Filter and Apply Filter
4. Click the Top One that have a Hover Effect.
5. You can tap favourite icon, read the project details and view other proposal.
6. Click the Place a Bid Button.
7. Fill the Bid Form Page and Click "Place a Bid" Button.
8. Your Proposal is Appear at the top and you have an option to view, retract and edit.
9. Click View to see your proposal information, Edit to Update, and Retract to Discard it.
10. User can explore Manage Page to see the Date they send the Proposal.
Walkthrough & Presentation Video :
App Presentation & Walktrhough :
Fig 3.36 Final App Presentation Week 15 27/07/2025
App Walkthrough in Run Mode (to show hover effect) and Published Link Preview :
Fig 3.37 Final App Walkthrough Week 15 27/07/2025
Video Breakdown :
- 0:00 - 4:15 = Run Mode Preview Flutter Flow
- 4:16 - 8:43 = Published Link Preview Mode
FEEDBACK
Week 14
- Mr. Razif said that my overall page and flow was okay and to setup the firebase , he said I can try duplicate the project since it have many trial and error.
REFLECTIONS
Creating a Freelancer app starting from app research in app design 1, working prototype, animation until a fully functional app has been a long, tiring and valuable journey. On this final project, I have learned so many things using flutter flow. Starting from zero experiences on flutter flow from week 1 until week 14, I realize the hardest part for the project suddenly becomes solved until I would able to complete the app.
The key learning for this module is we need to explore and learn as many as we can. We can try use many sources, like Mr. Razif tutorial, Flutter Flow University, Community and even AI. When using AI, we need to have a clear prompts and patience because not all of the procedure works. Testing every features is the important one in order to build the back end function. Overall, this module serves a great memory. Gonna miss a lot of experience building UI UX Project since this was my last semester for my specialization.
Comments
Post a Comment