These Animation Controllers stuff are the most complicated thing that I saw until now in Flutter! This will take some time before I grasp how all of these work. I will stick with the TweenAnimationBuilder since it is much simpler than these.
Thank you for this amazing tutorial. I was looking for an animation tutorial and found this. For reversing animation you can also use 'Built-in controller status checks' in the 'onPressed' if (_controller.isCompleted) { _controller.reverse(); } else { _controller.forward(); } so the final build method : Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return IconButton( icon: Icon( Icons.favorite, color: _colorAnimation.value, size: 30, ), onPressed: () { if (_controller.isCompleted) { _controller.reverse(); } else { _controller.forward(); } }, ); }, ); }
I was reading the Animation section in Chapter 6 of "Flutter in Action" but, If was like flying over my head and I was unable to get it... You made me clear about this..! Thank You.
Cool please a suggestion for the coming series. -A series on Angular -A series on livewire -A series on Alpine js Have a nice Ninja day. Thanks once more
I think that this way is better in stead of using a boolean and setState method onPressed: () { _animationController.isCompleted ? _animationController.reverse() : _animationController.forward(); },
Thank you again for the super tutorials. I was trying to stay 1 step ahead of you each time and I play with the code during the lesson (to try to learn and not just copy / paste your work). I skipped the Animation.status if statement and just wrote: onPressed: () { _selected == false ? _controller.forward() : _controller.reverse(); isFav = !isFav; Was easier for my brain to follow. But love that I learned about the AnimationStatus. I'm trying to make my first real app on the side between tutorials, next big thing is some kind of database to store all the info, settings, favorites, etc. Going to check out your FireBase flutter tutorial next and see how that goes. bool Subscribed = true;
thank you for the useful videos , can you make video about using SQLite in flutter specially multi tables and relations between them (PK, FK,etc ) and how to share data to all screens cause i didn't find that anywhere ??? thanks again
Question: what if I have more than 2 states of animation? A StatusListener provides us 2 statuses, so that we can switch forward to red and back to gray, but what if I want to have a yellow color on second click, and return to gray only on third click?
Thank you for the excellent work you have done. however in lines 31-34 I don't understand the call to setState() if (status == AnimationStatus.completed) { setState (() { isFav = true; }); } it can be remplaced with if (status == AnimationStatus.completed) { isFav = true; } and in lines 36-39 with if (status == AnimationStatus.dismissed) { isFav = false; };
Hi Net Ninja, this is the third of your series that I'm working alongside of and I wanted to thank you because these videos are fantastic and your clarity when explaining is better than any of my lecturers. However, I tried to remove the status listener and have the ternary operator as _controller.status == AnimationStatus.dismissed, but with no status listener and it works completely fine. Is there a reason that you didn't do it this way? Is it due to an update that wasn't around back then?
Bismillahir-Rahmanir-Rahim The reason it works is that the _controller.status changes during the animation. We create an isFav variable just to make things simple and easy to understand. Btw, I agree 100%. Ma Shaa Allah the tutorials are just amazing!
A value of type 'Animation' can't be assigned to a variable of type 'Animation'. Try changing the type of the variable, or casting the right-hand type to 'Animation'. Facing this error
Is the heart supposed to go out when we leave the page? Mine turns back to grey if i leave the screen and come back. I dont think thats going to be very useful if its a real app.
I guess if you're storing the "isfavorite" book in the database you can do a ternary operator to check if it's a favorite of not and then return an appropriate color depending on the value of the bool stored in the database
For example to set the initial color of the icon: Color: isFav ? Color(colors.red) : Color(colors.grey[400]) And the operator for which color it should then animate to/from would be somewhat the same
I swear these are better than paid tutorials. You sir, have saved my final year project and I thank you for that.
No one explains as you do. You are just awsome.
small hint at line 56 we can use _animationController.isCompleted which will give bool very nice explanation
Best playlist ever about Flutter animation for beginners!!! Thank you.
So many steps but explained brilliantly!
one of the best tutorials on animations I've seen on youtube. very well explained, thanks :)
These Animation Controllers stuff are the most complicated thing that I saw until now in Flutter! This will take some time before I grasp how all of these work. I will stick with the TweenAnimationBuilder since it is much simpler than these.
Someone give this guy 1Million Subscribers.
15 seconds ago 🔥🔥🔥🔥
Thank you for taking your time to make this
It is priceless
Absolutely everything is clear
Extremely good. Many thanks!
You have knowledge + teaching talent, you are a start bro
Thank you for this amazing tutorial. I was looking for an animation tutorial and found this.
For reversing animation you can also use 'Built-in controller status checks' in the 'onPressed'
if (_controller.isCompleted) {
_controller.reverse();
} else {
_controller.forward();
}
so the final build method :
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return IconButton(
icon: Icon(
Icons.favorite,
color: _colorAnimation.value,
size: 30,
),
onPressed: () {
if (_controller.isCompleted) {
_controller.reverse();
} else {
_controller.forward();
}
},
);
},
);
}
Man is a god
Thank You sooooooo soooo much!
You helped me fix my coding error....
CustomPainter overcomplicated it, but I worked it out! Thank You! :)
I was reading the Animation section in Chapter 6 of "Flutter in Action" but, If was like flying over my head and I was unable to get it... You made me clear about this..! Thank You.
Cool please a suggestion for the coming series.
-A series on Angular
-A series on livewire
-A series on Alpine js
Have a nice Ninja day.
Thanks once more
Superb Way to Explane Animation Thank You Soooo Much.
very helpful; thank you for your clear explanation
you don't need setState to change the value of a boolean variable (isFav), this is a variable not a state
Nice tutorial. Gave me everything I needed!
Big fan of you, sir plss make more gold contents like this gob bless you
Sir please make video series on PWA with react and firebase.... Although your video series about PWA (JavaScript) was awesome
I think that this way is better in stead of using a boolean and setState method
onPressed: () {
_animationController.isCompleted ? _animationController.reverse() : _animationController.forward();
},
Thank you again for the super tutorials. I was trying to stay 1 step ahead of you each time and I play with the code during the lesson (to try to learn and not just copy / paste your work). I skipped the Animation.status if statement and just wrote:
onPressed: () {
_selected == false ? _controller.forward() : _controller.reverse();
isFav = !isFav;
Was easier for my brain to follow. But love that I learned about the AnimationStatus. I'm trying to make my first real app on the side between tutorials, next big thing is some kind of database to store all the info, settings, favorites, etc. Going to check out your FireBase flutter tutorial next and see how that goes.
bool Subscribed = true;
thank you for the useful videos , can you make video about using SQLite in flutter specially multi tables and relations between them (PK, FK,etc ) and how to share data to all screens cause i didn't find that anywhere ??? thanks again
thank you so much!
Can you reveal your Laptop/PC configuration? I mean RAM, Processor, and Graphic Card?
Question: what if I have more than 2 states of animation? A StatusListener provides us 2 statuses, so that we can switch forward to red and back to gray, but what if I want to have a yellow color on second click, and return to gray only on third click?
I got the feeling inside my bones
you don't need the setstate with isFav boolean; setstate is for widget re- build which we aren't doing in this case;
Thank you so very much
Sir can u plzz make a guidance for how to go zero to hero for your plyalist
Is there any way to flush the controller. I don't want to use reverse, just forward.
Thank you for the excellent work you have done.
however in lines 31-34 I don't understand the call to setState()
if (status == AnimationStatus.completed) {
setState (() {
isFav = true;
});
}
it can be remplaced with
if (status == AnimationStatus.completed) {
isFav = true;
}
and in lines 36-39 with
if (status == AnimationStatus.dismissed) {
isFav = false;
};
I was asking myself the same question, since you apparently don't need to rebuild the widget...
true
Thanks for this, it was confusing me too.
Not needed
Hi Net Ninja, this is the third of your series that I'm working alongside of and I wanted to thank you because these videos are fantastic and your clarity when explaining is better than any of my lecturers. However, I tried to remove the status listener and have the ternary operator as _controller.status == AnimationStatus.dismissed, but with no status listener and it works completely fine. Is there a reason that you didn't do it this way? Is it due to an update that wasn't around back then?
Bismillahir-Rahmanir-Rahim
The reason it works is that the _controller.status changes during the animation. We create an isFav variable just to make things simple and easy to understand.
Btw, I agree 100%. Ma Shaa Allah the tutorials are just amazing!
i want the animation like byjuss app
A value of type 'Animation' can't be assigned to a variable of type 'Animation'.
Try changing the type of the variable, or casting the right-hand type to 'Animation'.
Facing this error
so status listener is if you want to only do something when the animation is finished.
Do we have to dispose the _conroller ?
How many videos will this series cover?
10 in total
@@NetNinja thankyou sir.. you are the best
Iam from
india
Is the heart supposed to go out when we leave the page? Mine turns back to grey if i leave the screen and come back. I dont think thats going to be very useful if its a real app.
Read the code. The on Press handler is being used to just change the color of the icon.
How can i set the initial color of the icon when iam working with a database.
I guess if you're storing the "isfavorite" book in the database you can do a ternary operator to check if it's a favorite of not and then return an appropriate color depending on the value of the bool stored in the database
For example to set the initial color of the icon:
Color: isFav ? Color(colors.red) : Color(colors.grey[400])
And the operator for which color it should then animate to/from would be somewhat the same
please react js about multilanguage app
create movie app
Firestor document id user id, user profile code
Net Ninja 🥷 is GOATED 🐐
Thanks Akindele!