FINAL PROJECT
BILIBILI Application
HOUYANHENG
0378215
Based on continuous iteration and updates, my app is now complete, covering several pages and functions, including
1.Login and Register
2.Home page, hot video page and "for you" page
3.Video playback page
4.Search Page
5.Search Details Page
6.ProfilePage
7.Mall page: bili shopping
8.Product page
9.Payment Page
Page construction and main function implementation：
Login and Register
First, create a new project in the Firebase console and enable Email/Password login. Then, bind the Firebase project in FlutterFlow's Firebase Setup and complete the platform integration settings. In the Authentication settings, configure the page to redirect to the homepage (e.g., TabBar) after a successful login, and to redirect to the Sign-In page if the user is not logged in.
Home page
First, add a String parameter (such as featureKey) to the settings of the playback page, then set the click action on the home page to jump to the playback page and pass in "V1". The playback page can control the display content or query the corresponding data based on this parameter. If the home page is a list, you can also pass the value of each list item to let each card jump to different content. In this way, you can achieve page jump with parameters.
On the homepage, select the container containing the search bar. In the Actions panel on the right, add an On Tap action and select Navigate To → SearchPage. Ensure Allow Back Navigation is enabled and Replace Route is disabled. Set the animation type to Instant or Right to Left, and set a duration of 300ms. Save and run the project. Clicking the area will redirect to the SearchPage.
Video playback page
First, add a String parameter named videoKey to the page settings and make it required. Then, place a VideoPlayer component on the page (with a title, description, etc.). The video source can be set to a local resource or a network link, and options such as autoplay, looping, and fullscreen can be enabled as needed. Next, set the visibility conditions for the player or its container. Set Visibility to Conditional and add OR conditions, such as videoKey == 'v1' or 'v2', to display different videos based on the passed parameters. Finally, when jumping from the previous page to the playback page, pass in the corresponding videoKey through a navigation action to implement video playback that loads different content based on the parameters.
Search Page
First, set the page background and keyboard collapse function, then add a top bar (including the back button and title). Next, place a rounded search bar with a search icon and input box, and add a TabBar with two options Comprehensive ranking and Sort by popularity. Add a list of video items to the page corresponding to each Tab, and display each video with a gray card with a thumbnail and title. Finally, you can add a click to jump to the playback page (VideoPlaybackPage) for the card, and pass in the parameter videoKey to play the corresponding video.
bilishopping and purchase functions
On the payment page, first create the structure consistent with the screenshot: Place a Form (such as Form11) and add input fields for the cardholder's name, card number, expiration date, and CVV (or use the CreditCardForm component directly). Place the three payment methods (Credit Card, PayPal, and Apple Pay) below the form, with Credit Card checked by default. Use a CheckboxListTile or a custom row for styling. Place a "Pay Now" button at the bottom. At this stage, only the UI is built; no logic is added. Next, add two page status fields to the page settings: isPaying (Boolean, initial value false) to control whether the loading status is displayed, and paymentStatus (String, initial value "") to display the payment result. These two states will be used in the button logic later.
Animation Design
In my project, animation is one of the most important parts. My animation design is divided into macro animation and micro animation. Macro animation refers to the animation of switching different pages, and micro animation is the animation of components in each page.When I officially designed the animation, I revised the previously designed animation to keep my animation style consistent and adapt to the function.
Micro animation：
When designing micro animations, I mainly consider two issues. The first is how to ensure the fun of the animation, and the second is how to ensure that the animation style is consistent with my application style.So I decided to frequently use ease in ease out animations with different directions and delays.
By determining different speeds and directions for each column in the page, rich micro-animation effects can be achieved within the page.
Home page
Set the top column to enter the fastest from the left, followed by the font. The middle row of videos then enter from the left. The bottom row of videos then enter from the bottom.
Hot Topics
The micro-animation of the hot video page is different from the home page. I designed it to be entered from the left and right respectively, so that it will not feel strange whether entering this page from the left or the right.
This page, I designed an animation that moves all columns from bottom to top. Because this page recommends the user's personal preferences, it should be based on the user and in line with the user's habits.
The animation of the video playback page is very fast and unfolds from bottom to top, so users can watch the video quickly without wasting time.
Search Page
On the search page, my animation is from top to bottom columns moving from left to middle, which meets the user's desire to explore.
On the search results page, the video animation effect is sliding towards the center from both left and right.
Shopping Page
To enhance the user experience on this page, I added animations to the top ribbon and product cards. The top column containing "My Orders / Shopping Cart / Browsing History" uses a Fade animation, fading in over 600ms on page load with a 200ms delay. The opacity changes from 0 to 1, while all other animation settings remain default. The four containers surrounding the product cards use a Slide animation, also triggered on page load. The animation durations are 600ms, 650ms, 750ms, and 800ms, respectively, with a 200ms delay. The animation slides upward from Y=100 pixels to its original position.
ProfilePage
The animation of ProfilePage is different from other pages. The animation is the personal data area, history and favorites slide in irregularly from the left and right.This makes the page look unique and stylish.
Flutterflow URL
BILIBILI application demo video
Reflection
The process of developing a FlutterFlow app was arduous. I constantly researched and often encountered problems that took me all day to solve. This process honed my learning abilities and helped me solve each challenging problem. This process also gave me a true understanding of the concept of "design for action." Previously, when I created interaction diagrams in Figma, I could freely sketch user flows and animation rhythms. But in FlutterFlow, every detail had to be translated into something that "moved"—this forced me to think more rigorously and practically.
When I first started adding animation, I crammed every page with animations, making them overwhelming. But while experimenting with my app on my phone, I realized that I received better feedback and self-critique when I put myself in the shoes of a user. So I began redesigning the animations and even the page layout to make them more user-friendly and efficient.
This experiment deepened my understanding of how animation is a rhythmic tool. When designing animations in the future, I'll no longer simply add everything, but instead consider their meaning, placement, and impact. At the same time, I also realized my shortcomings in state management and logic planning. In the future, I plan to study FlutterFlow's state mechanism and variable structure more systematically to reduce ineffective trial and error.
Overall, this was a deep cross-training in technology and design thinking. It wasn't just about using tools; it was also about overturning and rebuilding "experience logic."
Comments
Post a Comment