Summary
Keywords
Full Transcript
Welcome to Episode 7 of my BRAND NEW #FlutterFlow Crashcourse for 2024. It's time to get animating and bring our left sticky note navigation bar to life. In this episode we look at trigger animations and how we actually invoke them using Actions. Actions are a fundamental concept in FlutterFlow and in this episode we really do start to use them. Additionally we also look at Component State Variables and use conditional actions to decide which animations to trigger. Look out for projects which you can clone within each specific episode to cross check your efforts along the way. Finally at the end of Season 1 the final project will be available to clone. I'm Steve (thedigitalpro) and I am a FlutterFlow Ambassador for Europe and also voted by the community as a FlutterFlow Educator of the Year for 2023/2024. _____ Episode Starter Project Episode 7 - https://app.flutterflow.io/project/sticky-notes-stage-7-oz7e6o 🔥 Looking for more content and a helpful community? Why not consider joining The Digital Pro's #Nocode Academy (link below). Missed a previous Episode? (1) - Series Introduction - https://youtu.be/buc7l8g2cqg (2) - UI Project & Setup - https://youtu.be/Uzf-GS6yMlk (3) - Foundation UX Construction - https://youtu.be/_5YVrOs9yKA (4) - Text, Style & Theme Selector - https://youtu.be/71ro7552y_4 (5) - Test Modes & Extending UI - https://youtu.be/kP_FP2BwbsE (6) - Components & Constants - https://youtu.be/JXNtDfolyE0 _____ Chapters 00:00 Introduction 00:26 Preview of animations 00:54 FlutterFlow Command Palette Quick Tip 02:03 Creating a Trigger animation 06:12 Triggering the animation 12:01 Apply a trigger animation to Sticky Note circle selectors 14:51 Preparing our components ready for additional animations 15:43 Creating animations for the circle dot components 20:16 Creating actions to trigger the circle dot animations 23:31 Creating component state variables 25:06 Conditional Action to use our component state variable 32:20 Final animation test 32:51 Outro _____ 🚀 The Digital Pro's NoCode Academy: https://www.thedigitalpro.co.uk (Support the channel and go ad-free! 😉) 🔥 If you love my content why not consider buying me a coffee, it's really appreciated: https://www.thedigitalpro.co.uk/coffee 👍 Support the channel and grab yourself a free FlutterFlow account by clicking here: https://www.thedigitalpro.co.uk/flutterflow 🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
