Roaa 🦄💙 Profile picture
Apr 18, 2022 9 tweets 5 min read Read on X
#Flutter Animation guide 📑

1️⃣ Implicit - AnimatedFoo & TweenAnimationBuilder
2️⃣ Explicit - FooTransition, AnimatedBuilder & AnimatedWidget

1️⃣.1️⃣ Implicit - Ready-to-use
Add ‘Animated’ to a regular widget (Container, Positioned, .etc) with a duration and you’re good to go!

1/7
1️⃣.2️⃣ Implicit Animations - Custom

No AnimatedFoo widget fits your requirements and you still want something quick to set up? Use the #TweenAnimationBuilder widget! Simply changing the Tween values triggers an animation.

Use the child param for better performance!

2/7
2️⃣.1️⃣ Explicit - Ready-to-use

“Control” how your animations are animated with an #AnimationController and a #FooTransition widget (ScaleTransition, RotationTransition, …etc). You can now tell the animation when to start, reverse, repeat, ...etc

3/7
This is the code for the previous animation 👆🏼

4/7
2️⃣.2️⃣ Explicit - Custom

All of the above does not achieve your goal animation? Go wild with the #AnimatedBuilder widget and create controllable animations for any parameter of any widget!

or…

5/7
Create your own FooTransition widgets using the #AnimatedWidget!
The code below achieves the same previous animation 👆🏼

6/7
There are a lot more to cover for Flutter animations! but this should be enough for you to get started and build UI animations for your app with a wide range of complexities!

You can find all the code and animations above in this DartPad:

dartpad.dev/c9bb2627d4f383…

7/7
BONUS 1 🎉 I talked about all of this in detail in the #FlutterFestival Vulsad & Surat session. You can watch it here:
BONUS 2 🎉 For Arabic speakers: Same session in Arabic done for #FlutterFestival Saudi Arabia 🎉

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Roaa 🦄💙

Roaa 🦄💙 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @roaakdm

Dec 26, 2021
Class constructors in #Dart
With some #Flutter use cases 💙

1️⃣ Generative Constructors
2️⃣ Constant Constructors
3️⃣ Named Constructors
4️⃣ Redirecting Constructors
5️⃣ Factory Constructors

A thread 🧵
#DartDev #FlutterDev #OOP
1️⃣ Generative Constructor
Most common form, initializes Class variables Image
2️⃣ Constant Constructors
It lets you create compile-time constants. This is especially important to create constant widgets in your Flutter app for better performance. Image
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(