Application Design 2: Task 03
Application Design 2: Task 03
Instruct:
For Task 3, we need to create a rough framework of the model in Task 2 in FlutterFlow, and create the animation part in Lottieflies and add it to Flutter. This has improved our ability to use FlutterFlow and Lottieflies.
Task 2 Design model:
Flutterflow design process:
At first, I tried to import the model from Figma directly into FlutterFlow, but it didn't work. Then I asked GPT and learned that there is no way to import Figma directly into FlutterFlow. Since it was my first time to use this software, I looked for some tutorials on the Internet.
I made a flutterflow model while learning.
Start Page：
The start page is mainly composed of two animations, which I made at lottieflies
Guide Page：
The guide mainly has three pages, and animated text is added.
Unlogin Page:
Login Page:
Login Page 2:
Recommend Page:
Follow page:
Video Detail Page:
Message Page:
Search Page:
Tend Page:
My page:
User page:
Publish page:
Setting Page:
language Page:
About weibo Page:
Scan Page:
Create Pop-up window:
Comments Pop-up window:
Share Pop-up window:
Animation:
- Start page animation
- Guide page text animation
- Like animation
- QR code animation
- Video progress bar animation
Animation in lottiesflies:
- Start page animation
- https://app.lottiefiles.com/animation/d930c7d3-cc4f-44fb-b1df-8f4087430cc4
- Guide page text animation
- https://app.lottiefiles.com/animation/5f687e44-2071-4df7-96db-eff8722099c3
- QR code animation
- Video progress bar animation
Flutterflow link:
Presentation Video:
Reflection:
When using FlutterFlow to complete application design homework, dragging components and real-time preview allowed me to quickly turn ideas into interfaces, and the logic editor also easily implemented interactive functions such as page jumps, greatly improving efficiency. However, I couldn't distinguish the usage of "containers" and "cards" in the early stage, which led to a chaotic layout. Later, I made it clear by drawing sketches first and then matching components. When implementing the list display of data, I didn't know how to associate simulated data at first. It took me many attempts to learn how to use the "data collection" and "binding" functions. I also found that spelling errors in fields would cause data to not be displayed. This experience made me understand that although visualization tools have lowered the threshold, to do a good job of design, you must make good use of its convenience and understand the principles of design logic and data association. This is more rewarding than simply completing homework.
Comments
Post a Comment