APPLICATION DESIGN II: TASK 03
Introduction to Task 3:
In Task 3, we will learn the basics of using Flutterflow, including how to design page layout, UI design, and how to move our designs in Figma, including interactions and micro-animations, into Flutterflow and how to connect the project with Firebase for backend integration.
We also need to design the micro-animation we made in Figma on Lottieflies and then import it into Flutterflow. This tests our proficiency in using Lottieflies, as well as how to run animations in Flutterflow and how to bind data to UI components in Flutterflow.
These help us understand the no-code development workflow more clearly. This Task 3 task lays the foundation for us to build a fully functional mobile application in the future without writing complex code.
Design process of Task 3:
User flow map
🛠️Flutter Flow Prototyping
I first imported the prototype page I designed in Figma into Flutterflow. I found some tutorial videos on how to import figma into Flutterflow.
I tried to import it into Flutterflow using the method in the video, but it didn’t work. I could
only drag and drop widgets in Flutter flow to design and import icons, fonts, and page settings.
This is the page design I made on Flutter flow
📱< Welcome Page>:
In this page, I made some adjustments to this page. I changed the original three welcome pictures and progress bar animations on the welcome page in figma to one welcome picture.
Figma Welcome Page
FlutterFlow Welcome Page
📱< Log in Page>:
Open video browsing
📱< Nearby Page>:
📱< My Page>:
🎞️ Animation
Initial welcome page progress bar animation
Login page login loading animation
Like animation
Scan QR code animation
Payment animation
For animation in Lottie files
- Initial welcome page progress bar animation
Lottie files link:
- Login page login loading animation
Lottie files link:
https://app.lottiefiles.com/share/52270aff-d481-4a88-b107-dfc363851503
- Scan QR code animation
Lottie files link:
https://app.lottiefiles.com/share/61bc04bf-bc45-4425-87db-a872b3da14b9
Pre-Video
Personal reflection
I learned a lot about this Task 3 project, and I also encountered many difficulties in the use of FlutterFlow and LottieFiles. In Task 3, for example, how to connect with UI components, whether Figma can run FlutterFlow after importing Lottie files, and how to use the functions of designing animations on Lottie files are not proficient enough. By solving these difficulties, I finally completed the content of this Task 3. I think there are some loopholes and shortcomings in the prototype design of Task 3, such as page spacing arrangement, UI connection, etc., but I will find out the shortcomings and optimize and improve them in the final project. Finally, I will make the most perfect Red book design prototype in FlutterFlow.
Comments
Post a Comment