Application Design 2 - Final Project & E-portfolio

03/07/2025 - 24/07/2025  / Week 11 - Week 14

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Application Design 2 

JUMPLINK:

1. Lecture
2. Instruction
3. Final Project & E-portfolio
4. Feedback
5. Reflection

1. LECTURE

2. INSTRUCTION

3. FINAL PROJECT & E-PORTFOLIO

Description

A) Final Project – Completed App – 30 %

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.

B) E-Portfolio - 10 %

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

1 Presentation Slide to be submitted as pdf format

2 Online posts in your E-portfolio as your reflective studies

1. Function

Initially, I tried doing the download function without Firebase, using a list in App State and binding to title, artist, image, and URL. But after a couple of hours, I absolutely realized that it’s just not possible. I even tried looking for apps in FlutterFlow to see if I could follow how they did it. But they only have the play function, not the download function.

Fig 3.1 File on Flutterflow Market Week 15 27/07/2025

Fig 3.2 File on Flutterflow Market Week 15 27/07/2025

The reason I didn’t do it with Firebase during the class tutorial was because I couldn’t use my card to access Firebase Storage. Something about my card just didn’t work or something. So I automatically assumed that I couldn’t use Firebase. But I tried again out of desperation—and it worked?? I don’t know how, but I’m just going to be grateful and not question it.

Fig 3.3 Firebase Week 16 6/08/2025

So I continued and made the collection and the document of the song I wanted. I just made one originally to ensure the function works. ChatGPT (from what Sir curated for us Application Design students) said that I can’t use the full song, only a 30-second clip, and it told me to put it in Storage so I could get the HTTPS link—because for the audio player widget to work with binding, the audio needs to be of network type, not asset.

Fig 3.4 Collection Week 16 6/08/2025

Fig 3.5 Music Audio Link Week 16 6/08/2025

I added the Songs collection as the backend query in the Search Result page and added a ListView.

Fig 3.6 Backend Query Week 16 6/08/2025

Then I bound the Downloads collection to the Downloaded page and added a ListView.

Fig 3.7 Backend Query Week 16 6/08/2025

I also made another container to put the reference document backend query.

Fig 3.8 Backend Query Week 16 6/08/2025

Then I started binding the document fields to the appropriate text, image, or URL.

Fig 3.9 Backend Query Week 16 6/08/2025

Here’s the problem: after too many tries and errors, I found out that the Image widget can’t be bound with a string—it needs to be bound with an image path. With ChatGPT’s help, I tried everything, from using a Container widget with image background, to making it App State instead—it still didn’t work.

I even tried using custom code (generated by ChatGPT) to force a string bind, but when I tested it out, it came out with errors. This image binding problem took 5–6 hours. Dear Lord.

Fig 3.10 Img Binding String Custom Code Week 16 7/08/2025

Fig 3.11 Img Binding String Custom Code Error Week 16 7/08/2025

Technically it could work with just one song, since the title and artist can still be bound, but the image and audio URL can’t—because they don’t accept strings, even after I set the type to network. So I decided to just use one song that can be downloaded. I actually wanted to make multiple songs downloadable, but if I do that, the image and URL will all be the same—and that just looks wrong.

Maybe because the audio player widget just came out a couple of months ago, people don’t have much tutorials or guides on how to use it.

Fig 3.12 Audio Player Error Week 16 8/08/2025

Even for the song player in the bottom nav of my app, I originally wanted to make it like what I designed in Figma, but when I tried testing it, there were just too many error codes. So I decided to use the widget instead for the bottom nav song player—even though it’s a bit different from my original design. I didn’t put the image beside it because I already knew the image can’t be bound anyway.

Fig 3.13 Audio Player Error Week 16 8/08/2025

Even the widget has issues. For example, the container containing the widget needs to be the same or more height than the widget—if not, it will say it’s overflowing. But thank God, it doesn’t do that with the width.

Fig 3.14 Flutterflow Stack Week 16 8/08/2025

After that, I made a pop-up that shows the song has been downloaded. I made the whole app into a stack so I could place it on top and toggle its visibility.

Fig 3.15 Pop Up Design Week 16 8/08/2025

I used App State to trigger it with a Boolean, and bound it to the visibility.

Fig 3.16 Pop Up Function Week 16 8/08/2025

The song player, however, is the same as the image—it doesn’t take strings. So I had to just use asset so I could at least put in the entire song. The problem with this is that the song player will always play the same song, but the title will say “Song Title” until the user taps on the downloaded song.

Fig 3.17 Audio Player Title Function Week 16 8/08/2025

After that’s done, I set up the page navigation and gave them all a transition of slide left with a duration of 800.

Fig 3.18 StoryBoard Week 16 8/08/2025

(I forgot to mention earlier: I also linked the Firebase collection to FlutterFlow Firebase setup.)

Fig 3.19 Flutterflow Firebase Week 16 7/08/2025

Fig 3.20 Flutterflow Firebase Week 16 7/08/2025

2. Animation

For the animation, the page load animations are mostly similar to the Figma prototype I made. But that can’t be said for the page-out animations—all of them use slide right because I had to use the preset in the action flow, so I didn’t really get to choose.

Here are some of the pages with page-load animation. Also, since I gave the navigation transition a duration of 800, I needed to take that into account when doing the animations—and add a delay of 800. Because I wanted the page content to come in one by one, I had to keep checking the delay for each container/row/column so they would animate in sequence.

Fig 3.21 Dashboard Animation Week 16 8/08/2025

Fig 3.22 Serach Page Animation Week 16 8/08/2025

Fig 3.23 Downlaod Page Animation Week 16 8/08/2025

For the hover effect on images, I wanted each color to have its own hover state. So I asked ChatGPT and watched a couple of YouTube tutorials.

Fig 3.24 My Music Page Animation Week 16 8/08/2025

I wrapped the widget I wanted to hover with MouseRegion. Then I added a variation of hover for each widget in the local page state. It needs to be different for everything—if not, it’s going to show the hover state even when you didn’t hover over that specific container (because it shares the same local hover state name).

Fig 3.25 Mouse Region Week 16 8/08/2025

Then I put the mouse in/out action flow in the MouseRegion, and bound the widget style using conditionals according to the hover state. I used this method for the bottom nav icons, the cards, the filters, and the search bar in the dashboard.

Fig 3.26 Mouse Region Action Week 16 8/08/2025

Fig 3.27 Hover Conditional Week 16 8/08/2025

For the song player, it's quite different from my original design. I didn’t know how to bind the URL since it doesn’t accept a string. But the title and artist on the page and audio player still show the song once the user taps on the downloaded song.

I didn’t know how I was supposed to use the buttons or control the timeline of the song, so in the end, I just used the audio player widget again.

Fig 3.28 Song Player Design and Animation Week 16 8/08/2025

This caused a lot of white space at the bottom, so I filled it with the lyrics part. The lyrics section was originally supposed to scroll up and down, but if I allowed that, it would leave a blank space below. So I decided to just fill the space entirely—it still scrolls, but it looks full.

Fig 3.29 Song Player Bottom Nav Week 16 8/08/2025

For the fixed top and bottom navs, if the pages had a search bar, it was a bit confusing at first. I needed to calculate the padding properly using a stack so everything stayed in the right position.

Fig 3.30 Proflie Page Design and Animation Week 16 8/08/2025

I also added a profile page for the logout button. Since to redo the function, the user needs to be different—and I didn’t plan a delete button in my proposal back in Application Design 1.

Fig 3.31 Log In Design and Animation Week 16 8/08/2025

Fig 3.32 Sign In Page Design and Animation Week 16 8/08/2025

For the login and sign-in pages, somehow I couldn’t add a page-out transition into them because they use Auth only? But because of that, I could use the animation on action trigger in the page first, decide on what animation I wanted, and implement it in the action flow under widget animation.

Fig 3.33 Action Flow for Widget Aimation Week 16 8/08/2025

3. Publishing/Testing

I’ve been consistently testing the app after every single change, and it worked well. But when I actually published it, the audio widget didn’t work. I tried to troubleshoot it with ChatGPT to no avail. One of the suggestions was to change the type from asset to network—but it still didn’t work. So in the end, I used the walkthrough (Preview/Test Mode) instead of the published version.

Fig 3.34 Web Deployment error Week 16 8/08/2025

As you can see from the image above, there’s no title or play button—it’s just empty.

3. Final Submission

Web Deployment: Music App

App Walkthrough: Video

Fig 3.35 App Walkthrough Week 16 8/08/2025

Web Deployment Walkthrough: Video

Without playing the song obviously

Fig 3.35 Web Deployment Walkthrough Week 16 8/08/2025

4. Feedback

Week 15: 

Specific Feedback:

• I asked Sir for permission to extend the deadline and Sir allowed me.

5. Reflection

1. Experience 

This whole thing was honestly super frustrating at first. I tried to do the download feature without Firebase, and after hours of trying and testing, I realised it just wasn’t gonna work. Once Firebase finally worked (somehow), it got better, but still not easy. The image and audio binding stuff gave me a hard time, and I kept running into random layout problems. But I kept going and found ways around most of it. It wasn’t perfect, but I made it work as best as I could.

2. Observation

I noticed FlutterFlow still got a lot of bugs and limits, especially with the audio player widget. Some stuff works in test mode but completely breaks after publishing. Also, the binding system is super picky—like it won’t accept a normal string for images or audio. The animations and transitions were also kinda confusing at times, and I had to test them a lot to get them to work right.

3. Findings

Firebase is pretty much needed if you want to do anything advanced like downloads or dynamic stuff. The audio player widget can’t really be trusted to work with strings or network data properly. I also learned that testing isn’t always enough—you really gotta check how things behave after publishing. Even though I struggled a lot, I learned how to adapt, fix problems, and keep things moving even when it wasn’t going how I planned.