Flutter Animated Circular FAB Menu | Flutter UI Design Tutorial for Beginners
Вставка
- Опубліковано 22 лип 2024
- #flutter #flutterui #animation
In this Flutter UI Design Tutorial, we are going to be taking an in depth look at creating a Fluid Animated Circular Floating Action Button Menu in Flutter. We will be taking a look at how to Create Animation in Flutter. We will be using Stack and Positioned and Use Advanced Animation Techniques.
Code (Git) : github.com/letsdoit07/flutter...
Medium (Article): / non7wbzai5
Animation in Flutter: • Flutter Animation | In...
Stack and Positioned: • Flutter Stack & Positi...
🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
👉 Flutter Shape Maker: fluttershapemaker.com
🔥 Learn About the Most Important Widgets in Flutter 👇:
👉 Widget Essentials Series: bit.ly/3GpfiYw
👉🏻 Product Hunt: www.producthunt.com/posts/flu...
(Your UPVOTE Means a lot! 🙌)
If you find this video useful consider Supporting @RetroPortal Studio :
👉 Buy Me a Coffee: www.buymeacoffee.com/theretro...
👉 Patreon: / retroportalstudio
Social Links @RetroPortal Studio :
👉 Twitter: / theretroportal
👉 Medium: / retroportalstudio
👉 Instagram: / retroportalstudio
👉 Patreon: / retroportalstudio
👉 GitHub: github.com/retroportalstudio
If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
Thank you for Watching! Happy Coding :)
i have never really understood the flutter animations until now, thank u so much, greetings from colombia
Man, congrats to make this amazing class! Wow! You got new subscriber right now!
Great tutorial! Please, don't stop!
Love ALL of your tutorials
This covers a lot of animation basics ! Awesome.
Again, excellent video; great stuff. Let's feed some excited sentiment into the algorithm. I'm engaged!
Muchísimas gracias, me ha sido de gran ayuda el tutorial, ¡saludos desde España!
Thanks for sharing this awesome tutorial.
thank you veryy much man this is a very high quality and informative video
High Quality Video. KEEP UPLOADING... 👍
amazing vdo, clear explanation
keep going
Fix for onClick not working on Button Transition has been posted on Git! Thanks for the contribution! ✌😁
If you find this video useful, consider Following me on:
Twitter: twitter.com/theretroportal
Instagram: instagram.com/retroportalstudio
Happy Coding! ✌️😁
hey could u tell me where the change is for the onClick detection, couldn't find it on git
@@sayanchakraborty1503 Line 73 , 75-81
@@RetroPortalStudio thank got it, great video as always
Wow Thank You soo much for this tutorial 😊🙏 This is clever solution exactly what I need in my project !
Like always very well explain tutorial thank You for sharing your knowledge 😊
Best explanation on how to create smooth animations. Sending my support of your channel through Patreon. Thank you for all your great videos bro. Peace!
Thank you so much 💎💙😁
Awesome thanks!!!
Amazing 👌🏽
Thank You soo much, u saved my time.
nice tutorial. i like it
Amazing bro ❤️
thx awesome video... peace!!
Excelente aula professor! Me ajudou muito.
Para quem estiver com dificuldades com o onClick, façam o seguinte: na classe CircularButton substituam o IconButton pelo FloatingActionButton, o mesmo traduz automaticamente a região do click junto com o widget. Você também pode colocar o FloatingActionButton dentro de um container e redimensioná-lo; assm:
Container(
width: this.radius,
height: this.radius,
child: FloatingActionButton(
heroTag: this.heroTag,
child: this.icon,
tooltip: this.tooltip,
backgroundColor: this.color,
onPressed: this.onClick,
),
)
Pronto! Os seus problemas estarãoresolvidos.
Brother your best
very nice
Thank you
WOW!!
one question. Is it possible circularbutton put in Scaffold( floatingActionButton: ) ->child?
how to dock it in my bottom navigation bar?? Please help
How can I close the animated Circular FAB when I change the page if it is open
Do you think it would be possible to embed this pseudo-FAB in a bottom navbar?
you did a great job, can I use it in my project?
Hey, why can't i click on secondary buttons? Them "clicks" don't work. Thank you for the help. But can you say how do i can make this buttons clickables?
this is my problem too . did you find any solution for this problem?
Hero
Ras aa gaya
The getter value was called on null error occurs
What do I do now?
my onClick of backside buttons are not working, I've copied your code as well but still onClick isn't working. maybe there is a problem in the Circular button constructor where you've declared the "Function onClick" coz your code is showing error in that constructur that Type "Function" can't be assigned to the parameter type "voidFunction()?". I tried with this as well but same result :(
But I wanted to do this for FAB now using this it goes down unseen under other widgets. Is there any way that it will pop up over other widgets and when this menu is clicked the background is grey(disabled). Please reply
can someone help how to add null safety to this
In 1:02 how can you declare those properties so fast
Nice video! Thanks! It could be done with ImplicitlyAnimatedWidget like AnimatedPositioned?
Not with ease 😅
Bro please tell how to use chrome custom tabs in flutter, although there is a package for this, but that package is very very slow and has many bugs too. Please tell how to use chrome custom tabs in flutter
it's amazing thanks a lot
but i'm face little problem with onClick it's not working inside transform.translate?!
any help please?!
Fix for this has been posted on git repo! ✌😁
Thank you so much for this video. Please I have a problem to navigate in onClick function. It's not working inside transform.translate?
Fix has been posted to git! ✌😁
@@RetroPortalStudio Thanks a lot
Hi! The fix use IgnorePointer on the top of the stack... Can you explain how it can fix the onClick issue please and what is the trick? I use your work with some differences in my project and need to wrap the stack in a Container with some height and width as a work around but i don't use the IgnorePointer. But now i'm not able to click on items behind this container ... I probably miss something.
Thanks a lot for your work. It's awesome. (excuse for my english, i'm french...)
Sorry! I get it. IgnorePointer expand height and width to the Stack (so click events can be captured) and touch events are ignored only for the IgnorePointer's child.
Please also show onclick event working of all widgets
This is great. But is it actually possible to add functionality to the widgets that are animated?
I noted you didn't add any actual functionality to the 'on click' property of the flyout buttons. When i try to do so myself, it doesn't work. It simply doesn't seem to recognised its been tapped.
this is my problem too . did you find any solution for this problem?
@@masoudh6856 hey Masoud. I got it working in the end but can't remember exactly how. It's something to do with the fact that the buttons get moved outside of the box area where gestures are detected. You need to enlarge the detectable area of the button so the flyout buttons remain within that area that registers taps. I think I did it by setting the width of the main button positioned widget to double infinity so it spread across the whole width of the screen or something like that
onClick() is not working inside transform.translate, can you give me the solution?
Do you know the soltion now ?
onClick not working inside transform.translate, I've tried everything, any solution 24/04/2020?
The problem is there are not in the same area which gesture the click event try to wrap it with container and give the container any color so you can see the boundary of it ..then you will know what to do.
Now my laptop isn't near from me otherwise I was write the code here but if you need the code this is my email
reemsoftware.engineering@gmail.com
@@reemosman2207 i also need a fix for this bug
i have the same problem losing onPress when using transform operations, kindly any help :)
Fix for this has been posted on Git! Thanks ✌😁
@@RetroPortalStudio Thank you! :)
The onClick Funtion of the smaller buttons dsnt work.... or is it just me ?
Its a problem with Transform 👨🚀 Figured it out later. Transform doesnt Translate the Click Region along with the widget. Will post the workaround on github soon. ✌😁
@@RetroPortalStudio thank you, I'm now "Watching" the github project, will that be enough to get me notified when there's news?
brother actually the aninations happen but the button click is not happening
i mean when the button come out and if i select the camera button its event is not firing.
Fix has been updated on git repository please check 😁
@@RetroPortalStudio I am trying to add your complete stack to floatingActionButton: getbottomCenterFloatingButton(), attribute via a method. nothing has changed even i copied your entire source code. but still the buttons are not clickable.. I did tried to parse them into inkwell and even tried other options .. nothing worked.
Guys im having issues when i try to call the onpressed function, nothing happens. It seems because we are using a stack and only the button on top is accesible to the actions. How can i make all buttoms work when onpressed/onClick is pressed? Thnks in advance
nvm i figured out... i took this tutorial as a challenge and was tying to build it on my own with very little guidence from the video lol... i just forgot to add the IgnorePointer() in the iconbuttons stack.
@@santosvision solution please
"On Click" doesn't work for the three inner Circular Buttons :(
Checked the previous comments and found the solution through your git repository. Thank you very much....
I did same thing. But onClick function is not working.
Please check the git! Fix has been updated ✌😁
@@RetroPortalStudio Thank You.
I've just tried it, but are sure the menu items are clickable, the event onPressed is not called at all for the 3 menu items.
The fix has been pushed to git some time ago! ✌😁
@@RetroPortalStudio I've just copied fromt he github repo less than an hour, and it is not working for me, can you please point out to fix so I can check my code again?
@webghost2009 it was pushed a few months ago and last i checked it was working. Email me the code , i'll take a quick look at it if you want
@@RetroPortalStudio If I use different layout on the body widget, the child button cannot receive callbacks, because the container in the IgnorePointer must be set to be large enough to cover the child buttons, then it workds. Is there a better solution?
İs there any updates about the onClick problem?
Yes the issue is solved but the code for that has changed majorly for performance optimization with new approach. I'll post it soon!
Great to hear that! Thanks a lot for the great vids
@@RetroPortalStudio Thank u! You were didactic. Nice Tutorial!
Fix has been posted on git! Community Support ✌😁
Not working on environment sdk: ">=2.12
Same issue for me
use "late" key word on the initialization of the animation controller e.g late AnimationController animationController;
@@hughesabsalom526 When you use late then you get "LateInitializationError: Field 'degOneTranslationAnimation" has not been initialized."
onClick() is not working inside transform.......
There is a current issue going on with Transform. As the Detection Region remains at its untransformed location. Will post the fix on Git Soon ✌😁
You can keep track of the issue here: github.com/flutter/flutter/issues/18408
@@RetroPortalStudio That issue seems to be closed about a year ago. It does reference #32192, but that one has been open 6 months now. It's definitely the problem though, if you don't translate the buttons they do work.
Yes exactly! I have come close to a workaround. But have to clean it a bit ✌ Will post it soon
@@RetroPortalStudio currently what is the status if you find solution please post it ?
I send a pull request with the simplest solution I could do to solve on click problem
Merged! Quite a smart fix mate. Kudos! ✌😁
Thank you