Complex Animations in Flutter Using Rive - Part 2
HTML-код
- Опубликовано: 5 авг 2024
- In this tutorial we'll be building a customised animated slideout menu using Flare and Flutter. We're building a gooey slideout menu in Flare from scratch and then implementing the animation interaction in Flutter.
Animation assets: www.dropbox.com/s/8tt53n2yyo3...
GitHub source: github.com/FilledStacks/flutt...
Animation File: www.2dimensions.com/a/danemac...
Twitter: / filledstacks
Instagram: / filledstacks 
Наука
I forgot to mention you can clone the repo for this code or download the assets. Links in the description
👨💻
Congratulations for such detailed and yet fast/not boring tutorial. Thanks!
Haha, thank you very much. I was actually a bit concerned that the building process will be a bit boring. Thanks for the feedback.
ty so mutch, please continue with this type of tutorials, you are the only one who do it nice
Thank you 😊 i will put a few more tutorials out around flare and the animations.
One of the best flutter anim tutorial out there thank you
Good to hear you got some value from it.
damn I saw your recommendation from fireship...damn This channel is heaven sent....Keep up the good work🙌💯👍
Thanks man! Much appreciated. I'm happy that you like the content. I'll try my best to keep it up
I absolutely love everything about this video. Thank you so much!
Yeaaah❤️ you're very welcome.
Thank you so much for so many details. Much appreciated!!!
You're very welcome :) I'm happy to hear that it brought you some value.
Awesome! thanks for the tutorial!
You're very welcome. Let me know if you get any value from it.
Thank you! Detailed tutorial!!!
You're very welcome. I tried my best to pack all the details into the video.
such an amazing teacher!
🥳 Dankie 😁😁😁
Very Very cool video. thanks for sharing
You're welcome. Thanks for watching.
enjoying these videos, tx
Awesome 🙌🙌 thanks for letting me know.
Awe ma se kind :p Great channel, keep up the good work!
Hoyaaaaaaa! Salut bru. I will 😎
Eres un crack bro ;D, sigue si compa
I tried to translate that but I don't know what that means 😅
really nice animation.
Thank you. It's an oldie but a goodie.
@@FilledStacks Is this possible with the current status of the new rive 2 package?
@@king4053 Yes, everything should still be possible to do.
Thank you 🙏🏼
You're welcome :)
Congratulation keep go on
Thank you. I will
OMnS
Amazing wow
Thanks for watching the video 😊
Thanks for the intro to the Smart Flare library. Very cool. I have a quick question. Lets say I have a button that allows a user to subscribe/unsubscribe. The button has 2 simple animations in Flare that simply animate from one state to another. This state is loaded from firebase. When the state is changed by the user, i update firebase, and with the help of StreamProvider, the change is reflected after the update, however i'm unsure how to show the proper state of the button on the screens initial load? Is there an idiomatic way to do this? Should I have 2 different artboards?
Thanks for the interest in it. For something like that I would use the base Flare widget and not a smart flare actor. This way you can control your animation being played by simply changing the animation name that's returned from the firebase stream update. So basically just setting the new animation name and rebuilding your Flare actor with the given animation.
FilledStacks Thanks for your reply. The problem with that is when a relevant screen is loaded the animation plays. But really it should only show the the current state, for example subscribed or unsubscribed, and play the animation only when the user presses the button
Hello. I made my flare animation and it worked well on the 2dimensions web page. Then I used this animation in Flutter and it worked like before. A few days ago all of my flare animations started to be delayed. When i first load a page which contains flare animation, the flare animations appear on the screen like 1-1,5 seconds later than the flutter widgets. Does anybody know what the problem is?
Hey, I haven't worked directly with flare animations recently. If you think it's a library issue you should log it on their github repo for Flutter flare so they can know about it.
Please make a video for => How to use dynamic Icons for this animation? means without previously created any icons but only create water animation or floating animation?
Hey, sorry for only replying now. Your comment was in the spam section. I don't know what you're asking man. I created the animations from scratch.
@@FilledStacks I don't want to use flower or fruit icon. I want to provide flutter icons manually.
@@shoikatmd1907 Then you can convert those icons into images and use it in the place of the flower or fruit icons. The animation is one total animation, it's not separate. This type of animation only works if you're building large all in one animations that would be very difficult to do in code.
Unable to import my assets in rive 2 ... No assets panel is available in rive 2
There's probably a different way of doing it. You'll have to check around there.
How can we capture click events on the Menu Item?
Pass in an Active Area for that position.
when i'm setting the width attribute my height also gets increased.
is there a way so solve this? setting the height does nothing..
You have to increase the animations width and then make it fit in the box. The animation draws like an image, it has a fixed ratio so you need the box it's in to either match the ratio or it will grow the match your defined fit and crop the horizontal or the vertical axis. So width and height must have the same ratio as your artboard in flare otherwise you'll get cropping
i made one for my app, but the animation doest seem to be responsive, when the screen size is bigger than sidebar, it leaves white spaces, please help
oh! i did find your comment about artboard ratio and sized box, and fixed the issue, i need a a small help, how do i declare a bool value which will tell me whether the drawer is open or not?
nice! Well done. these animations are cool to add.
You do that simply in code. You can actully just check if the last played animation matches the animation name for the animation that opens the drawer.
Can u tell me the same for Android Java
I can. With Flutter you don't have to write it differently for any platform. It'll run the same on both. And if you mean I must make a tutorial with the exact same thing for Android, then that won't happen. I don't re-write the same code for a different platform. That's why I'm using flutter. Dart is very similar to Java so you should be able to easily port this code over if you want it to only run on Android
Can you make the list box animation ?
hey, I don't know what you're asking
That's great. I should learn animations in flutter. How do you think I should follow steps? (from beginner to advanced)
The tutorial you're commenting on is using Flare for animations in Flutter. I find it easier for advance animations. But if you're just starting out just read the docs on AnimatedContainer in the flutter docs and that should get you on your way.
Then go over to fireship.io and watch the Radial Menu video using Flutter. That should give you an indication of how to use the Tweens with the animation controller in Flutter. And after that just practice. Go to uimovement.com and try to replicate all the animations you see there.
Then come back to this video and see how to integrate Flare to make the animations even easier.
@@FilledStacks Thank you. I'll start your advice. How long does it take approximately?
To do what?
I learned flare and animations in flutter when i made my first tutorial for animations from Flare in Flutter. Took me a few minutes to learn Flare and then another few to integrate in Flutter.
I knew how to animate in general using key frames from my game development days so i just had to learn the flare tool.
@@FilledStacks Sorry, I didn't ask the question correctly. I would ask how long it will take to learn animations from zero to advanced. Building a plan on time motivates me. Of course, I assume to work hard.
@@yunusemrealpak6118 Aaaah I see. Well it all depends what kind of animations. To grasp the idea of how animations work shouldn't take to long. You'd just have to learn the concept of frames and the idea of interpolating between them. So you can start with learning about Frames from Animation only videos. Once you grasp that idea the tools you use to build animations become easier to understand as well as doing animations in code.
I wouldn't be able to give you an example of how long it would take since I've been using frames on paper to make little animations since I was a kid. I'm gonna give you a rough idea and say the concept of key frames and interpolation shouldn't take longer than a week if you're reading and studying it with all the free time you have.
Then learning a tool like Flare should be a bit easier and there are tons of beginner videos out there.
After that part you'll have to read up on Animation basics, and how to make it feel real. There's 12 rules to that and only some of them applies to animations in UI. And the most important part of it all will be when to apply it, and perfecting the small details which comes only with practice. I'd say you can get up to a good speed for basic animations for Mobile App UI in less than 1-2months depending on how fast you learn.
Character animation and things like that take years, and I have almost zero experience in that. That's an entirely different craft on it's own. But mobile animations are straight forward. Provide context and feedback whenever the user performs or is expected to perform an "important" action.
I hope that helps. It's a good thing to know to get some diversity as a coder.
thx q
🙏
OMnS
Can you please 🙏 🙏 🙏 tell me from where you learn this flutter and animation
Check the ScopedModel video where you asked the same question 🙏🙏🙏
can i make these three be a button bread and the other one when they appers if i can how ?
i think you're asking if you can make the animations tappable? if so then yes, I show that in my part one of the complex animations.
@@FilledStacks yes i see the complex animation but in complex animation you use flare actor and Here you are about using pan flare actor ? these reason i never got it
@@AlwaysMore Pan Flare actor moves the animation forward when you pan over it since we want it to do that. You don't have to use it if you don't want the animation to move as you swipe over it.
Ok My question can i mix them together pan flare actor and flare actor cuse when i pan my animation it appers after that i wanna make it tappable ?
Hi thare Dane , hope you doing fine
i added this code to the final code we reached at the end of the video
RelativeActiveArea(
guardComingFrom: ['close'],
area: Rect.fromLTWH(0, 0, 1.0, 0.20),
debugArea: true,
onAreaTapped: () {
print('Top pressed');
}),
RelativeActiveArea(
guardComingFrom: ['close'],
area: Rect.fromLTWH(0, 0.22, 1.0, 0.18),
debugArea: true,
onAreaTapped: () {
print('Mid pressed');
}),
RelativeActiveArea(
guardComingFrom: ['close'],
area: Rect.fromLTWH(0, 0.41, 1.0, 0.18),
debugArea: true,
onAreaTapped: () {
print('Bottom pressed');
}),
after i added it , the active areas werent guarded from close and still can press them after closing the menu
and as soon as i press any of the added active areas , i cant close or open the side bar any more
any help would be appreciated
Hi Ahmed, thanks for reaching out. I don't have a project or the time to do a review on that code for you. You'll have to debug yourself. Clone the repo locally and reference it from your project then set break points to see why it's happening.
sir plz want some suggestion from you about animations in flutter plzz can you please share your insta
Yes. Use rive
Oh you want my instagram? It's called FilledStacks
Though the tutorial is really detailed it is too fast and mechanical
Exactly how I intend it to be :) Slow tutorials make me lose my mind. I keep skipping forward then realised its too far then close the video down. I aim to make sure I pack a dense tutorial into every one i do. i'd like to see it adopted more to avoid 48 hour courses than can probably be taught in 3-4 hours.
@@FilledStacks Well, I thought so. But, I think you should understand that other people are not like you and many prefer more gradual approach when they want to learn something
@@andreygritsay762 I completely understand that. I'm lucky enough to know that the core audience i'm trying to reach does appreciate this style because a lot of devs that already know how to code are looking for a quick video to get the idea of an implementation and then turn it off. I cater toward those devs. Devs that have experience in programming in general but not with flutter. So some things i don't have to explain which I'm happy about. I already struggle to produce a 20 minute video so the more compact I can make it the better. it takes me about 24 hours to make 1 video (working hours). Two full working days with the last 1 on a Sunday. I'm actually aiming to make it more compact so I can deliver more in a video.
@@andreygritsay762 That way I might be able to get a sunday or two back and make the video in 1 day.