Complex Animations in Flutter using Rive | Flare

  Рет қаралды 224,673

FilledStacks

FilledStacks

Күн бұрын

In this tutorial we'll be covering how to add interactive functionality to an animation built using Flare.
Written Tutorial 1: www.filledstacks.com/post/red...
Written Tutorial 2: www.filledstacks.com/post/sma...
GitRepo: github.com/FilledStacks/flutt...
2Dimensions / Flare : www.2dimensions.com/
Let's work together 👉 calendly.com/danemackier/1-on...

Пікірлер: 284
@FilledStacks
@FilledStacks 4 жыл бұрын
If you want some more Flare Action checkout how to build a cool splash screen with Flare. kzfaq.info/get/bejne/araXl6mKyLfUpZc.html
@FilledStacks
@FilledStacks 4 жыл бұрын
@Sriparno Baksi Haha 2 for the price of one. "Responsible Me" that's definitely a movie title isnt it?
@FilledStacks
@FilledStacks 3 жыл бұрын
Yeeeaaah!! That's what I like to hear 👂 Thanks for watching.
@scottdejesus1383
@scottdejesus1383 5 жыл бұрын
Amazing amount of detail and fluidity, I especially liked the diagrams to help better visualize what you were explaining. Best tutorial I've ever seen!
@FilledStacks
@FilledStacks 5 жыл бұрын
Wow dude. You don't know how much that comment means to me. Thank you for the feedback, i really appreciate it a lot. Thank tou
@nickjensen3632
@nickjensen3632 5 жыл бұрын
This is an awesome tutorial man! Will definitely be following your channel more closely in the future :) Keep it up.
@FilledStacks
@FilledStacks 5 жыл бұрын
🙌😎 thank you man! I appreciate the feedback. I'll try my best.
@SayanMondal342
@SayanMondal342 5 жыл бұрын
God this is such detailing, I love it. You really spiced up animations up a notch
@FilledStacks
@FilledStacks 5 жыл бұрын
Thank you 🙏 I really appreciate the feedback.
@lesptitsoiseaux
@lesptitsoiseaux 5 жыл бұрын
You, sir, take the cake for flare animations videos this month!
@FilledStacks
@FilledStacks 5 жыл бұрын
haha, thanks. Hopefully I can get the cake for next month too :) I have some good animation videos planned, just ironing out the implementation and I'll be putting out the next one.
@theforestapp
@theforestapp 5 жыл бұрын
reminds me of SlideNerd when i was learning Native Android. He always put tons of effort into making visualizations and i both respected and admired his effort to helping the visualization of topics. Taking the time to cut out the useless parts that other people just leave in sets you apart and provides so much value. PLEASE keep doing this. Subscribed!
@FilledStacks
@FilledStacks 5 жыл бұрын
Thank you for your kind words. I really appreciate the feedback. I will keep pushing to make it better.
@crypticparadigm2180
@crypticparadigm2180 4 жыл бұрын
I cannot thank you enough for this tutorial. Subbed and liked!
@FilledStacks
@FilledStacks 4 жыл бұрын
Aweeeesome!! Thanks man.
@jordybaylac9470
@jordybaylac9470 5 жыл бұрын
man, I just jave to congratulate you, good motion, good talk, good content, good duration, just great work!
@FilledStacks
@FilledStacks 5 жыл бұрын
Thanks a lot man. I appreciate the feedback
@wickedgummybear3104
@wickedgummybear3104 4 жыл бұрын
Couldn't agree more..
@FilledStacks
@FilledStacks 4 жыл бұрын
😊
@savinpadencherry444
@savinpadencherry444 4 жыл бұрын
This channel is fire... Amazing content and the level of understanding you get after watching these tutorials are next level... Right on!!... Subscribed
@FilledStacks
@FilledStacks 4 жыл бұрын
Whooo hooooo!! Yeaah man! Thanks for the great feedback. I really appreciate it, and thank you for subscribing.
@savinpadencherry444
@savinpadencherry444 4 жыл бұрын
@@FilledStacks T hank you for these videos and contents!
@ScienceSeekho
@ScienceSeekho 3 жыл бұрын
Something unique to see! Great work dude
@FilledStacks
@FilledStacks 3 жыл бұрын
Thanks Thanks Thanks! I appreciate the kind comment.
@MarcusTwichel
@MarcusTwichel 5 жыл бұрын
This is an awesome package and I'm definitely gonna check it out! Thanks!
@FilledStacks
@FilledStacks 5 жыл бұрын
Thanks man. Lots of updates to come. I have some exciting plans for it. The goal is to build a fully animated on boarding process with and have all your interactions managed through smart flare with callbacks.
@crazy-man
@crazy-man 3 жыл бұрын
cool explanation. I tried for a long time, everything is very clear here
@FilledStacks
@FilledStacks 3 жыл бұрын
Awesome! That's good to hear :)
@VictorKun
@VictorKun 5 жыл бұрын
Such fluency and detail of explanation, wow
@FilledStacks
@FilledStacks 5 жыл бұрын
That is what I was going for 😊 thanks for the feedback.
@gillesashley9314
@gillesashley9314 Жыл бұрын
You guys are simply awesome ❤.
@FilledStacks
@FilledStacks Жыл бұрын
Thank you. happy that we can help
@sathyajithps013
@sathyajithps013 3 жыл бұрын
Cool video, Cool library. Great job. Thanks
@FilledStacks
@FilledStacks 3 жыл бұрын
:D Awesome, I appreciate the kind words. Thanks for watching
@estebanaguirre4550
@estebanaguirre4550 5 жыл бұрын
Hey bro, keep doing this. You're amazing! Regards from Colombia...
@FilledStacks
@FilledStacks 5 жыл бұрын
Thank you for your kind words. I'll try my best ❤️
@Its_Pritam_
@Its_Pritam_ 4 жыл бұрын
This was a top-quality content!
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank man! Happy to hear you enjoyed it.
@dharmang
@dharmang 4 жыл бұрын
Excellent work dude! I have just started learning flutter so have a bit long way to go will try it out 😊
@FilledStacks
@FilledStacks 4 жыл бұрын
Awesome. Welcome to the community. This video is definitely not for beginners in flutter. You should learn the basics of animation first.
@joannabusoba
@joannabusoba 4 жыл бұрын
Thank you so much for the amazing tutorial!
@FilledStacks
@FilledStacks 4 жыл бұрын
You're very welcome. Thanks for watching 🙏🙌
@multitest2556
@multitest2556 4 жыл бұрын
Thank you for the tutorial and the Flutter package ))
@FilledStacks
@FilledStacks 4 жыл бұрын
It was my pleasure making it and writing the code for the package :) Thanks for watching
@harshjain93
@harshjain93 3 жыл бұрын
You've made careers!!! Of so many people, with each video. !!!
@FilledStacks
@FilledStacks 3 жыл бұрын
I appreciate your kind words :) Thank you very much 😊
@harshjain93
@harshjain93 3 жыл бұрын
@@FilledStacks Would you like to make a video on Beamer in the context of flutter web? :)
@FilledStacks
@FilledStacks 3 жыл бұрын
@@harshjain93 Not at the moment. But if we start using it for web then i'll definitely make a video for it. I want the usage of it to match how we're using it now, if it can't be setup that way or close to it I'm probably not gonna switch because unit testing the navigation logic will be thrown out of the window.
@Philson
@Philson 5 жыл бұрын
OMFG Beautiful Animations!
@FilledStacks
@FilledStacks 5 жыл бұрын
Hehe, Thank you.
@AjiboyeTemitopeTayor
@AjiboyeTemitopeTayor 5 жыл бұрын
Just found your channel. This is super awesome. 😊😊😊😊
@FilledStacks
@FilledStacks 5 жыл бұрын
Yup yuup! Welcome welcome. I hope you learn something here with us 😊
@Ahm4dBilal
@Ahm4dBilal 3 жыл бұрын
Hi, Your work is so great I am really thankful that you are there to help with almost everything when it comes to flutter. You have made coding in flutter much easier. However, Rive has changed closed signups for Rive 1 and we can now only register on Rive 2 and use that to produce animations. It would be really great if you made a tutorial on that too and also made a package so that we could remove all the boilerplate. Much thanks Sir! I mean I there are no words to thank you enough.
@FilledStacks
@FilledStacks 3 жыл бұрын
Thank you for your kind words Ahmad. I really appreciate it. I have not used the new rive. When I start using it I'll be sure to share the steps and the code involved to complete the functionality / produce the animations I want in the code. For now I have no experience with it so I don't have much input on the matter right now.
@Ahm4dBilal
@Ahm4dBilal 3 жыл бұрын
@@FilledStacks Sure, thank you so much! You are great
@JhourladEstrella
@JhourladEstrella 4 жыл бұрын
We love how he pronounce "button" as "batoon" and "animation" as "anehmaishoon" :D I'm subscribing.
@FilledStacks
@FilledStacks 4 жыл бұрын
hahahaha 🤣 It's always so funny to hear how other people hear your own accent. Never heard it like that. Thanks for subscribing!
@FernandoLucaDeTenaSmith
@FernandoLucaDeTenaSmith 4 жыл бұрын
That was awesome. Thanks men !
@FilledStacks
@FilledStacks 4 жыл бұрын
You're very welcome man. I hope you checked out some of the other Flare videos as well. It's a pretty powerful tool
@Mani-xx4fz
@Mani-xx4fz 4 жыл бұрын
Nice stuff right there! 👏
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you :)
@anant1489
@anant1489 4 жыл бұрын
Very nice tutorial, thanks 🙏
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you and you're very welcome. I appreciate the feedback :)
@rajashreeparam
@rajashreeparam 3 жыл бұрын
Hey great tutorial, loved it!! Would also love to see how to create such amazing animations on Rive
@FilledStacks
@FilledStacks 3 жыл бұрын
This is rive. Flare was renamed to rive :D so everything should be exactly the same.
@abdoulraoufgambo
@abdoulraoufgambo 2 жыл бұрын
God bless you my Friend. I find what i'm looking for❤️
@FilledStacks
@FilledStacks 2 жыл бұрын
Very happy to hear that!
@jeromestsauver
@jeromestsauver 5 жыл бұрын
Fantastic - great job
@FilledStacks
@FilledStacks 5 жыл бұрын
🙏 Thank You
@zond_amond
@zond_amond 3 жыл бұрын
Great guide!
@FilledStacks
@FilledStacks 3 жыл бұрын
Thank you.
@vinayak186f3
@vinayak186f3 3 жыл бұрын
Nice presentation skills 🔥
@FilledStacks
@FilledStacks 3 жыл бұрын
Thank you! I appreciate it. this video took so long to make I gave up on all the animations and presentation graphics haha.
@codingright
@codingright 4 жыл бұрын
Great video! Thank you.
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you. You're welcome :)
@BjsCity
@BjsCity 4 жыл бұрын
Holy crap this is a great video 👏
@FilledStacks
@FilledStacks 4 жыл бұрын
haha, thanks man! I appreciate it.
@christoffrossouw2923
@christoffrossouw2923 5 жыл бұрын
I know a South African accent when I hear one. Keep up the good work
@FilledStacks
@FilledStacks 5 жыл бұрын
Hehe 😆 sal so maak 🇿🇦 thanks for the positive feedback
@andredippenaar
@andredippenaar 4 жыл бұрын
I'm busy learning Flutter now - awesome tutorial. Super excited about what's possible. What's the prospects for Flutter developers in Cape Town SA?
@asandax6
@asandax6 4 жыл бұрын
Yeah I was about to ask are you South African 😂 It's great to see Flutter Devs in South Africa.
@FilledStacks
@FilledStacks 4 жыл бұрын
@Andre Dippenaar I have had 2 clients here but don’t know about the job market. my other clients are all international.
@FilledStacks
@FilledStacks 4 жыл бұрын
yeeeeaaaah SA in the house 🤜😆
@cornelius1402
@cornelius1402 4 жыл бұрын
Great Tutorial ;)
@FilledStacks
@FilledStacks 4 жыл бұрын
Thanks you!
@JeremiKress
@JeremiKress 4 жыл бұрын
Holy shit, a fellow South African. Subscribed!
@FilledStacks
@FilledStacks 4 жыл бұрын
haha yeeeaaaah! :) Thanks
@Steph-sm5pb
@Steph-sm5pb 3 жыл бұрын
Was wondering the same thing, helloooo
@elemelons2183
@elemelons2183 5 жыл бұрын
Gevaaaaaaaaalik 😊 great videos buddy. Proud of you! Is imo
@FilledStacks
@FilledStacks 5 жыл бұрын
Hoyaaaaaaa Imoooo! Dankie bru, ek wardeur dit man 😊
@OCTsecond
@OCTsecond 3 жыл бұрын
Thank you for the tutorial
@FilledStacks
@FilledStacks 3 жыл бұрын
You're very welcome. Happy to have made it.
@jebwatson
@jebwatson 4 жыл бұрын
Awesome video. Humble suggestion: Since leftSideTouched is always dependent on topHalfTouched, but topHalfTouched is independent, you can put the top half check first like 'if (topHalfTouched && leftSideTouched)' for a small optimization due to short circuit evaluation.
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you :D That's a good observation.
@ericlima7572
@ericlima7572 4 жыл бұрын
You are an angel. Tnx!
@FilledStacks
@FilledStacks 4 жыл бұрын
Haha, thank you Eric!
@chordfunc3072
@chordfunc3072 5 жыл бұрын
Really Cool package :D
@FilledStacks
@FilledStacks 5 жыл бұрын
Thank you :)
@sifiso5055
@sifiso5055 5 жыл бұрын
Awesome video
@FilledStacks
@FilledStacks 5 жыл бұрын
Thank you 🙏
@Huy-ed2re
@Huy-ed2re 5 жыл бұрын
Excellent! Please do more Flare tutorials :)
@FilledStacks
@FilledStacks 5 жыл бұрын
I definitely will be doing more :)
@FilledStacks
@FilledStacks 5 жыл бұрын
Check out the latest video :)
@afrodroidtutorials5869
@afrodroidtutorials5869 4 жыл бұрын
Your amazing buddy.
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you, I appreciate the kind words.
@tasminchalmers
@tasminchalmers 5 жыл бұрын
AMAZING!!
@FilledStacks
@FilledStacks 5 жыл бұрын
🥳
@AdemoyeOpeoluwa
@AdemoyeOpeoluwa 5 жыл бұрын
Wow 👏 .. have be looking for such transitions in the intro part of this video. please make more tutorials like that. I subscribed immediately.. 😀😂👌👍
@FilledStacks
@FilledStacks 5 жыл бұрын
Haha, Thank you. I have some more animation videos planned for the future.
@AdemoyeOpeoluwa
@AdemoyeOpeoluwa 5 жыл бұрын
FilledStacks Don't wait for the future bro.. the time is now the 😂😂😀😎👌
@FilledStacks
@FilledStacks 5 жыл бұрын
@@AdemoyeOpeoluwa :) It takes some writing and planning to get them out ;). I'm starting my Flutter Foundation series next. When there are updates to Smart Flare I'll be making a new video. But I have a very good one planned.
@FilledStacks
@FilledStacks 5 жыл бұрын
I'm literally busy writing a new one right now. Check out the github.com/filledstacks/flutter-tutorials repo and you'll see I'm busy with a new one 😁
@AdemoyeOpeoluwa
@AdemoyeOpeoluwa 5 жыл бұрын
Ok.. Great😎
@jethromoller2757
@jethromoller2757 4 жыл бұрын
the fact that you're south african makes me so happy i could cry. big ups
@FilledStacks
@FilledStacks 4 жыл бұрын
☺️🎉 Thank you very much for the support and cheers. I appreciate it a lot. I'll keep representing 👌
@chriscarman247
@chriscarman247 3 жыл бұрын
Awesome! Thanks :D
@FilledStacks
@FilledStacks 3 жыл бұрын
It’s my pleasure. Thanks for watching
@Trofeleiro
@Trofeleiro 4 жыл бұрын
Wow! Really nice work! Congrats 👏 Question: if we want to give some responsiveness layout, can we automatically resize the animations and areas to fit?
@FilledStacks
@FilledStacks 4 жыл бұрын
Thanks! Yes. The animation can resize but it will do so keeping its ratios. I'd suggest a separate animation if you want to have the layout appear differently.
@sexyeur
@sexyeur 5 жыл бұрын
Subscribed and belled. Heard about FilledStacks from Fireship.io's Jeff Delaney. Thank you!
@FilledStacks
@FilledStacks 5 жыл бұрын
Awesome, thanks man! I appreciate it.
@LexPrimost
@LexPrimost 5 жыл бұрын
If there were a way to subscribe or like 1000 time i will , this is genius and very understandable you put a lot of effort in this tutorial. Thank u for that and for the package !
@FilledStacks
@FilledStacks 5 жыл бұрын
Haha I wish you could 😆 and thank you. I really appreciate the feedback.
@mester0912
@mester0912 3 жыл бұрын
Bro... You're amazing!!!!!!!! When I grow up I want to be like you hahahahaha
@FilledStacks
@FilledStacks 3 жыл бұрын
Hahaha Thank you. I must admit, it's pretty cool having the skills :) Thanks for leaving a comment.
@amrragheb221
@amrragheb221 5 жыл бұрын
thanks sir very helpful
@FilledStacks
@FilledStacks 5 жыл бұрын
You're ver welcome. Subscribe for the next video, it will be about how to properly handle async logic in Flutter using only Flutter and no additional architectures. I think it's gonna be a good one.
@amrragheb221
@amrragheb221 5 жыл бұрын
@@FilledStacks I did
@leoboissard6306
@leoboissard6306 5 жыл бұрын
high level for me yet, but its very cool! gj
@FilledStacks
@FilledStacks 5 жыл бұрын
It is cool, thanks man. It's a lot simpler than setting up all the Tweens and controllers to sync the individual animations up in code.
@BrutusPalmeira
@BrutusPalmeira 4 жыл бұрын
Oh man.... i’ll have to learn flutter now.
@FilledStacks
@FilledStacks 4 жыл бұрын
Flare is preeettty compelling. Checkout all the cool stuff on rive.app when you get a chance. I'm integrating some more stuff into a new client project so I'll be sharing a bit more rive functionality in the new future.
@justaquib
@justaquib 5 жыл бұрын
it's f***ing awesome...
@FilledStacks
@FilledStacks 5 жыл бұрын
Haha yeeeaaah! Thanks man, I think so too.
@FilledStacks
@FilledStacks 5 жыл бұрын
Did you check out the new one? It's super quick to setup and gives your app a grreeeaaaat premium feel.
@mbelelebohang
@mbelelebohang 2 жыл бұрын
Finally, a fellow South African .... :)
@FilledStacks
@FilledStacks 2 жыл бұрын
Yeeeaaaahh! Welcome :D
@zehijean8817
@zehijean8817 5 жыл бұрын
I like the you teach things...I'ma flare up
@FilledStacks
@FilledStacks 5 жыл бұрын
Dope! 💪 gonna be putting out more flare goodness in a few weeks.
@ShivamJha00
@ShivamJha00 4 жыл бұрын
Just WOW
@FilledStacks
@FilledStacks 4 жыл бұрын
Hehe happy you enjoyed it.
@jeevacanessane2245
@jeevacanessane2245 5 жыл бұрын
Waw amazing, but one question : can we reduce the hitbox area for the circle ?
@FilledStacks
@FilledStacks 5 жыл бұрын
Yes, you can set your dimensions to whatever you want. I was just showing it that way. Follow the tutorial and change your widths and heights to what you want it to be.
@FernandoLucaDeTenaSmith
@FernandoLucaDeTenaSmith 4 жыл бұрын
Men the tutorial and the plugin are awesome! The only thing is I`m implementing it in my app and need that change of the "onAreaTapped". Are you going to be able to make soon? or accept the current request and then update? I know you are full of things, but the plugin is awesome and really want to keep using it. Thanks for everything!!
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you 😊 I'm probably going to accept the change since I definitely won't be able to get to it. I can't even get to this weeks video 😭 I'll merge the request the.n push the update.
@ismannyb8148
@ismannyb8148 4 жыл бұрын
I'm still mastering state management I feel is most important then I'll focus on in UI design and animation.
@FilledStacks
@FilledStacks 4 жыл бұрын
Yes, state management is more important. What's even more important than state management is coding principles. Understanding separation of concerns or the SOLID principles will help you build any state management system you want to use.
@LexPrimost
@LexPrimost 5 жыл бұрын
Also in the video description there is a typo in the link to the written article. You wrote "medum" instead of "medium".
@FilledStacks
@FilledStacks 5 жыл бұрын
I'm always making spelling mistakes 🙄. Thank you for letting me know
@jajasaria
@jajasaria 5 жыл бұрын
men, can i barrow your head. :) heheh your so amazing. keep it up
@FilledStacks
@FilledStacks 5 жыл бұрын
haha, thanks. I'll try my best :)
@josedanielgrijalbaosorio7431
@josedanielgrijalbaosorio7431 4 жыл бұрын
@Filled StacksI would like put the main button on top, and how can I change position of the other buttons on the left side. could you tell me please.
@FilledStacks
@FilledStacks 4 жыл бұрын
You can use the align widget to adjust the widget position. You'll have to go to the flare file to change the animations.
@yeisonvelez1198
@yeisonvelez1198 3 жыл бұрын
hello, thanks for sharing. I have a couple of doubts, I hope you please clarify them for me. I want to make the text that I get from a web service I can put it in real time in a flare animation, is it possible?
@FilledStacks
@FilledStacks 3 жыл бұрын
Hey, you're welcome. No that's not possible, but with relative positioning it is. Simply just ovrelay Flutter Text where it's required.
@LeandroR99
@LeandroR99 4 жыл бұрын
Hey! Thanks for the tutorial. I am a designer and not a dev, and I find it a bit difficult to understand everything. But I was wondering it is possible to trigger and control Flare objects from Flutter. For example: I want to do a globe spinning animation, but it would have a intro section with 1 second lenght, the the globe spinning, which would be a loop, but when a event happen, I want to animate that globe so it scale down, or fades, or whatever. It would be like animating the parent object rather the its children, but preserving the current animation state of the children. I haven't found much documentation on this, so any information would help.
@FilledStacks
@FilledStacks 4 жыл бұрын
Hey, thanks for watching the content. Must be pretty hard to follow when it comes to the coding part. The answer is yes, you have complete access to the artboard and the nodes on there. If you get a dev to take care of the dev side direct him to the 2Dimensions git repo where they have a lot of demos and examples for flare projects. Ones where you mix animations and control separate ones (the house size increasing example). You can definitely do what you're asking. Hope that helps.
@LeandroR99
@LeandroR99 4 жыл бұрын
FilledStacks it really does! I am working with a dev but I like to play around and understand what can be done. I will try some experiments with my dev partner. Thanks for your quick answer. And have a great weekend.
@jeps7688
@jeps7688 4 жыл бұрын
I had one hell of a laugh @ 1:26 lol
@FilledStacks
@FilledStacks 4 жыл бұрын
haha :) Nice. Got one person to laugh at it lol
@jasmeetsingh7356
@jasmeetsingh7356 4 жыл бұрын
Thank you Dane to make it very simple to understand. How to inculcate this into your stacked architecture? I am very confused ..... can you help me out with this....
@FilledStacks
@FilledStacks 4 жыл бұрын
You're welcome :) The stacked architecture will make no difference to this. This is just a widget. Wherever you want to use it, in stacked or bloc or wherever you can follow the exact same code and just put the widget where you want it to be.
@jasmeetsingh7356
@jasmeetsingh7356 4 жыл бұрын
@@FilledStacks Thank you for your response Dane... I must say you manage your time really very well... One more favour,techieblossom.com/flutter-responsive-ui-for-learning-platform-app/ this is a small doc by Prateek he uses a class Sizeconfig for widget size scalling ....how can I initialize this class using get_it and add in locator.dart and make it available throughout the widget tree...
@FilledStacks
@FilledStacks 4 жыл бұрын
@@jasmeetsingh7356 Thank you. Construct the class and supply it as a singleton then request it where it's needed although you can do the same with provider.
@edson.rbispo
@edson.rbispo 4 жыл бұрын
as you left the emulator like in this vscode side look, is this an extension or is it the Android Studio emulator itself. And that I thought is cool is configuration. it looks like it is embedded in vscode.
@FilledStacks
@FilledStacks 4 жыл бұрын
It's the emulator from the google sdk you can launch it from VS code as well. You can either run a flutter app and it'll ask you which device you want to launch, or click at the bottom right of vs code where it says "no device" and select one to launch
@nandarizkamaulana7623
@nandarizkamaulana7623 4 жыл бұрын
Hi @filledStacks I'm Nanda, what tools you used for making this video ?. Thanks
@FilledStacks
@FilledStacks 4 жыл бұрын
Hi Nanda, I use DaVinci Resolve to edit my videos.
@epicmap
@epicmap 2 жыл бұрын
If the invisible area of the animation is obstructing some part of the UI, this part of the UI will become "touch-immune" (aka watch only) and practically unusable. So we need to somehow pass the tap event to a widget behind. Not good. Or if there's no active area (or it can be disabled) FlareActor will do it automatically for us?
@FilledStacks
@FilledStacks 2 жыл бұрын
If there's a guard against it then it won't register it. Additionally you can simply make sure that it's ignored in the closed state and it'll go to the part behind it.
@sudoferraz
@sudoferraz 4 жыл бұрын
How can you see the containers on the emulator that demonstrates the widget you are in?
@FilledStacks
@FilledStacks 4 жыл бұрын
Set the debugArea property to true
@peekpt
@peekpt 5 жыл бұрын
I think flare team should look at this and add clickable nodes on the code and pass the name of the node through a callback
@FilledStacks
@FilledStacks 5 жыл бұрын
Given how quickly this was implemented i think they probably would. But also, i think providing the library that plays the animations is a good way to keep things separate. Maybe they can make SmartFlare official for interaction. That would be pretty cool. Luigi and the team at 2Dimensions have seen all of this. They seem to like it.
@fernandamarchio802
@fernandamarchio802 4 жыл бұрын
How did you put this refresh bar on the top of VS Code?
@FilledStacks
@FilledStacks 4 жыл бұрын
I didn't. it's what shows when you press f5 to run the flutter app.
@boasortede
@boasortede 3 жыл бұрын
do you know why this error 'package:flutter/src/widgets/transitions.dart': Failed assertion: line 1427 pos 16: 'animation != null': is not true.
@FilledStacks
@FilledStacks 3 жыл бұрын
Your animation is null. It should not be null.
@casul-4891
@casul-4891 3 жыл бұрын
Can you do the rive2 ? Like make sidebar etc. in flutter
@FilledStacks
@FilledStacks 3 жыл бұрын
Maybe, if it's different than the first one in a big way then I might make another few videos in it. I'll have to use it and see how different it is.
@wlockuz4467
@wlockuz4467 2 жыл бұрын
What would you recommend to make the touch areas more precise?
@FilledStacks
@FilledStacks 2 жыл бұрын
I've built a smart flare package using this logic where you can define areas using a rect. It has a debug mode as well.
@FilledStacks
@FilledStacks 2 жыл бұрын
so you can inspect your areas in the ui.
@Gabriel-kl6bt
@Gabriel-kl6bt 4 жыл бұрын
I am not sure if I could learn all this by myself, without following tutorials, etc.
@FilledStacks
@FilledStacks 4 жыл бұрын
If you've solved a lot of problems these things become a matter of sitting down and writing the code. Over time, the more problems you solve in terms of UI or business logic the easier this becomes. I have a game development background so working with a "canvas" and creating interactable elements on it that are all rendered is a very normal thing.
@mohammedeal-qershi9988
@mohammedeal-qershi9988 5 жыл бұрын
I like it❤❤, but my phone doesn't show any icon in 01-star😭💔
@FilledStacks
@FilledStacks 5 жыл бұрын
I didn't give the app an icon so you should just see the flutter logo in the drawer
@search_me_tilak
@search_me_tilak 4 жыл бұрын
From where should I learn state management properly 😭😭 I'm not getting any videos ?
@FilledStacks
@FilledStacks 3 жыл бұрын
You should start with my video "from setState to architecture" then watch my provider architecture video, then watch my stacked latest architecture series.
@amansinghal9672
@amansinghal9672 5 жыл бұрын
Great. But when I use it , button is not showing . And giving warning : if you are cycling through animation there is a high chance that you might need to set the animation required property on the active area.
@FilledStacks
@FilledStacks 5 жыл бұрын
You're the first one that has come accross that. The warning is from an old package and has since been updated. Update the smartflare package to ^0.2.6. And make sure you have added everything correctly. The asset in the pubspec file, the assets in the correct location, the full filename to the animation and the correct name of the animations. If you're still struggling the working project is on github in the description. Clone it, open final and see if that runs on your machine.
@amansinghal9672
@amansinghal9672 5 жыл бұрын
@@FilledStacks Thank you . It works.
@adhyaaytharwal1203
@adhyaaytharwal1203 4 жыл бұрын
my pubget is not working even after doing it for multiple times and it has no error plz help sir
@FilledStacks
@FilledStacks 4 жыл бұрын
Make sure you're using versions that exist.
@wykeless
@wykeless 2 жыл бұрын
damn this is really cool, but would you do an updated version of this? since the app is called rive now and it seems like you implement it differently
@FilledStacks
@FilledStacks 2 жыл бұрын
It is really cool and yes, I will be doing an updated version soon. We're going to be making use of a lot of rive in my new app and I'll be sharing everything we're doing around it. There's some cool things I have in mind.
@wykeless
@wykeless 2 жыл бұрын
@@FilledStacks ahh that's awesome, i cant wait to see it!
@yashpatel-qg3ic
@yashpatel-qg3ic 4 жыл бұрын
can we use in java(eclipse ide).
@FilledStacks
@FilledStacks 4 жыл бұрын
I don't know. You should try. I haven't used eclipse in many years.
@mester0912
@mester0912 3 жыл бұрын
Where do you teach how to animate the Music Player? D:
@FilledStacks
@FilledStacks 3 жыл бұрын
I don't :D
@gavinren2809
@gavinren2809 3 жыл бұрын
希望中国的IT人才能尽快普及这个技术,下次组建团队以这个技术为前端标准
@FilledStacks
@FilledStacks 3 жыл бұрын
That would be great! I'm hoping I can help teach some developer from China as well. The language barrier is tough but hopefully that can be solved in the near future.
@dhiyaaulauliyaa3988
@dhiyaaulauliyaa3988 3 жыл бұрын
anybody has try using flare in flutter-web? mine just won't start in web, but with the exact same source code, it runs well in mobile. anybody have suggestion?
@FilledStacks
@FilledStacks 3 жыл бұрын
I haven't used it in web. Don't know if it's fully supported.
@muhammaduzair1723
@muhammaduzair1723 4 жыл бұрын
Awesome Lecture and tell me sir! how I change the Camera Icon ??? please Explain me sir!! thanks in Advance
@FilledStacks
@FilledStacks 4 жыл бұрын
Thank you. You go to the flare file and replace the icon with the icon you want. The file is linked in the description and in the written tutorial
@muhammaduzair1723
@muhammaduzair1723 4 жыл бұрын
@@FilledStacks FilledStacks thank u soo much for your reply sir! But I already check that file and word icon is not there. Help me little bit more sir! Bcz I almost completed my word.
@muhammaduzair1723
@muhammaduzair1723 4 жыл бұрын
I done it Man!!!! as per ur instruction
@FilledStacks
@FilledStacks 4 жыл бұрын
@@muhammaduzair1723 Awesome. I'm happy that it worked :)
@FilledStacks
@FilledStacks 4 жыл бұрын
@@muhammaduzair1723 Luckily you figured it out :)
@Shubham-ou1ge
@Shubham-ou1ge 4 жыл бұрын
Is it good way of doing things for production app
@FilledStacks
@FilledStacks 4 жыл бұрын
If you require animations that are this elaborate then yes. Otherwise you can use normal animations. this is just a way to make very complex animations only take a few lines of code.
@Shubham-ou1ge
@Shubham-ou1ge 4 жыл бұрын
@@FilledStacks Thanks for so quick reply. Actually i am a graphic designer from after effects. Just wanted to learn flutter but animations in programming are quite complex. Thanks for making it easy for all us. Can you show make another video about cool animations in flutter?
@FilledStacks
@FilledStacks 4 жыл бұрын
@@Shubham-ou1ge I have a few on my channel, did you go through all of them? I have the splash screen and the slide out menu.
@kennethordona4893
@kennethordona4893 4 жыл бұрын
Is it possible to play the animation everytime i tap it without destroying the same animation?
@FilledStacks
@FilledStacks 4 жыл бұрын
you mean you want the current one to fade out while it's playing and start playing a new one? Because the same animation would have to either play or reverse for what you're asking. You could try to mix them but since they're not inddependent animations it might look very weird.
@kennethordona4893
@kennethordona4893 4 жыл бұрын
@@FilledStacks Yes just like that. I want to play the same animation while playing the current one. I'm making a balloon animation that sliding up. (Sorry for my bad english)
@FilledStacks
@FilledStacks 4 жыл бұрын
@@kennethordona4893 That you'll have to build into your app and add a new flare widget everytime you tap the button. Then you can make sure that when the animation is done you call dispose.
@DevendraPareek101
@DevendraPareek101 4 жыл бұрын
Is it possible to do this to a native app??
@FilledStacks
@FilledStacks 4 жыл бұрын
Yes, Flutter produces native apps :) But if you're asking if you can use Flare for Android and iOS apps written separately then, yes, iOS only I think. I know Flare has a swift library, otherwise you can just look at the implementation and write a clone for Android if you need it.
@DevendraPareek101
@DevendraPareek101 4 жыл бұрын
@@FilledStacks Thanks that clears it up
@ahmedafridee3997
@ahmedafridee3997 4 жыл бұрын
what about loop animations?
@FilledStacks
@FilledStacks 4 жыл бұрын
Those can just be played with the basic flare animation package
@topexmystery
@topexmystery 4 жыл бұрын
you should add background music to the video
@FilledStacks
@FilledStacks 4 жыл бұрын
Haha, so funny. Other people are asking I should take it out. I only use it when I'm not instructing or coding. With dialog i think it's fine, otherwise it's a bit too distracting.
@topexmystery
@topexmystery 4 жыл бұрын
@@FilledStacks I see, some people are enjoyed to follow whole instructional video with appropriate low-volume bgm, while some doesn't. Thank you for responding to my suggestion.
@laurentjoly7759
@laurentjoly7759 9 ай бұрын
Very nice. But now flare is Rive. Can we have the same things with Rive?
@FilledStacks
@FilledStacks 9 ай бұрын
Hey, yes. It's the same thing, I think their package is still called Flare, if not you can just do the same thing with the Rive package that we do in here.
@sadhlife
@sadhlife 4 жыл бұрын
the 'guardComingFrom' idea doesn't seem ideal. i would rather just add an if check: if (isOpen) ...
@FilledStacks
@FilledStacks 4 жыл бұрын
You could do that, but if you have multiple animation that need to be guarded against then one boolean flag won't work. I know that because I only had one boolean and it didn't allow me to guard coming from specific animations. In chained animations some can only play after another has been played and others can't be played after a certain state has been reached. If you have only two states you can use one of the other SmartFlare widgets like the cycle which will simple cycle between two animations.
@bhabhayt398
@bhabhayt398 2 жыл бұрын
Tab bar search video and source code
@FilledStacks
@FilledStacks 2 жыл бұрын
I don't think there's any source code for it. Found it on a ux site that doesn't exist anymore.
@fabioselau4576
@fabioselau4576 4 жыл бұрын
How can I use it inside a FloatingBottom?
@FilledStacks
@FilledStacks 4 жыл бұрын
The FloatingActionButton takes any widget so you can simply place the animation as the floating action button for the scaffold.
@fabioselau4576
@fabioselau4576 4 жыл бұрын
@@FilledStacks Yes buddy, but in case it is placed directly inside the FloatingActionButton, it is inside the FloatingActionButton. If you put it out, everything is buggy because of the size, there is a darker color on top of the buttombar that does not allow any item to be opened, any tight item is opened by the FloatingActionButton, because of GestureDetector. Know how to solve
@fabioselau4576
@fabioselau4576 4 жыл бұрын
@@FilledStacks It would be nice to use the FloatingActionButton as the video circular and when you press it open the menu with the animation
@FilledStacks
@FilledStacks 4 жыл бұрын
@@fabioselau4576That would only be possible by building all of that functionality from scratch. Which is why I wen this route. I made it to look like a floating action button. You can modify the animation for it to pop out to the left if you want the floating action button on the right.
Flutter SVG Animations With Rive
1:00:44
Reso Coder
Рет қаралды 33 М.
Implementing complex UI with Flutter - Marcin Szałek | Flutter Europe
44:26
Mom's Unique Approach to Teaching Kids Hygiene #shorts
00:16
Fabiosa Stories
Рет қаралды 34 МЛН
WHAT’S THAT?
00:27
Natan por Aí
Рет қаралды 14 МЛН
Complex Animations in Flutter Using Rive - Part 2
24:56
FilledStacks
Рет қаралды 27 М.
Build Animated Apps with Rive & Flutter (Livestream)
1:05:15
HeyFlutter․com
Рет қаралды 2,6 М.
Rive interactive animation in Flutter | Gordon Hayes
56:40
Majid Hajian
Рет қаралды 3,2 М.
Designing the Future: Interactive Animations with Rive
42:41
NewForm with Brandon Groce
Рет қаралды 12 М.
The ONLY Reason I Use Flutter
2:53
FilledStacks
Рет қаралды 9 М.
Getting started with Serverpod 🚀 and Dart 🎯 on the backend
27:13
Serverpod 🚀
Рет қаралды 2,4 М.
Flutter Flare Basics - Let's Build Giphy's Nav Menu
13:22
Fireship
Рет қаралды 177 М.
Flutter Animation in 5 Minutes
5:01
Fun with Flutter
Рет қаралды 176 М.
Pragmatic State Management in Flutter (Google I/O'19)
33:25
Flutter
Рет қаралды 448 М.