Скачать или смотреть #FlutterFlow

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/st...

🔥 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 -    • #FlutterFlow Crashcourse 2024 - SE01 - Epi...  
(2) - UI Project & Setup -    • #FlutterFlow Crashcourse 2024 - SE01 - Epi...  
(3) - Foundation UX Construction -    • #FlutterFlow Crashcourse 2024 - SE01 - Epi...  
(4) - Text, Style & Theme Selector -    • #FlutterFlow Crashcourse 2024 - SE01 - Epi...  
(5) - Test Modes & Extending UI -    • #FlutterFlow Crashcourse 2024 - SE01 - Epi...  
(6) - Components & Constants -    • #FlutterFlow Crashcourse 2024 - SE01 - Epi...  

_____

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/flutt...

🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.