Flutter Animated Circular FAB Menu | Flutter UI Design Tutorial for Beginners

[@hernancorrea2146]

i have never really understood the flutter animations until now, thank u so much, greetings from colombia

[@jrcleber]

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.

[@alansantos4897]

Man, congrats to make this amazing class! Wow! You got new subscriber right now!

[@jorgwei8590]

Again, excellent video; great stuff. Let's feed some excited sentiment into the algorithm. I'm engaged!

[@vmkantu]

This covers a lot of animation basics ! Awesome.

[@RetroPortalStudio]

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! ✌️😁

[@sayanchakraborty1503]

hey could u tell me where the change is for the onClick detection, couldn't find it on git

[@RetroPortalStudio]

@@sayanchakraborty1503 Line 73 , 75-81

[@sayanchakraborty1503]

@@RetroPortalStudio thank got it, great video as always

[@thedartside1050]

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!

[@RetroPortalStudio]

Thank you so much 💎💙😁

[@MdSiam-kw5ox]

Thanks for sharing this awesome tutorial.

[@sergiolopez7338]

Muchísimas gracias, me ha sido de gran ayuda el tutorial, ¡saludos desde España!

[@rafidev2099]

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 😊

[@everydaystoriesanimated2318]

High Quality Video. KEEP UPLOADING... 👍

[@DaveTradeFx_01]

amazing vdo, clear explanation keep going

[@fcbheart]

Great tutorial! Please, don't stop!

[@theethicalh3707]

thank you veryy much man this is a very high quality and informative video

[@rakharuan]

Love ALL of your tutorials

[@naminh674]

nice tutorial. i like it

[@Mervel122]

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?

[@masoudh6856]

this is my problem too . did you find any solution for this problem?

[@anshgoutam9681]

Brother your best

[@MustafaYldz-wl5vx]

very nice

[@mumenahmed3461]

Hero

[@CodeWithSrini]

Thank You soo much, u saved my time.

[@Nobody-ky7sl]

Awesome thanks!!!

[@reemosman2207]

it's amazing thanks a lot but i'm face little problem with onClick it's not working inside transform.translate?! any help please?!

[@RetroPortalStudio]

Fix for this has been posted on git repo! ✌😁

[@djamel_sebbagh]

Thank you

[@greenhelix]

thx awesome video... peace!!

[@atahaneser8863]

Amazing 👌🏽

[@icscybersecure]

Ras aa gaya

[@sidronio]

Nice video! Thanks! It could be done with ImplicitlyAnimatedWidget like AnimatedPositioned?

[@RetroPortalStudio]

Not with ease 😅

[@VJKoding]

Amazing bro ❤️

[@turbogoose64]

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.

[@masoudh6856]

this is my problem too . did you find any solution for this problem?

[@turbogoose64]

@@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

[@wandjimikhael8487]

Thank you so much for this video. Please I have a problem to navigate in onClick function. It's not working inside transform.translate?

[@RetroPortalStudio]

Fix has been posted to git! ✌😁

[@wandjimikhael8487]

@@RetroPortalStudio Thanks a lot

[@xRruiiz]

onClick not working inside transform.translate, I've tried everything, any solution 24/04/2020?

[@reemosman2207]

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 [e-mail]

[@pietrovr46]

@@reemosman2207 i also need a fix for this bug

[@1motsem]

i have the same problem losing onPress when using transform operations, kindly any help :)

[@RetroPortalStudio]

Fix for this has been posted on Git! Thanks ✌😁

[@xRruiiz]

@@RetroPortalStudio Thank you! :)

[@nishitpatel5599]

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 :(

[@mual77]

WOW!!

[@fatihdemir450]

you did a great job, can I use it in my project?

[@abhishekchandane87]

Please also show onclick event working of all widgets

[@fathimashafana4881]

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

[@Surimi888]

Do you think it would be possible to embed this pseudo-FAB in a bottom navbar?

[@greenhelix]

one question. Is it possible circularbutton put in Scaffold( floatingActionButton: ) ->child?

[@hamzahasan5286]

can someone help how to add null safety to this

[@vrajendramandloi5917]

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.

[@RetroPortalStudio]

Fix has been updated on git repository please check 😁

[@vrajendramandloi5917]

@@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.

[@priyarajchanda7388]

how to dock it in my bottom navigation bar?? Please help

[@pierremarchini237]

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...)

[@pierremarchini237]

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.

[@darianaguila9465]

How can I close the animated Circular FAB when I change the page if it is open

[@Hasibuzzamantaz]

The onClick Funtion of the smaller buttons dsnt work.... or is it just me ?

[@RetroPortalStudio]

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. ✌😁

[@mrp10012]

@@RetroPortalStudio thank you, I'm now "Watching" the github project, will that be enough to get me notified when there's news?

[@tieno8663]

In 1:02 how can you declare those properties so fast

I did same thing. But onClick function is not working.

[@RetroPortalStudio]

Please check the git! Fix has been updated ✌😁

@@RetroPortalStudio Thank You.

[@mrlucky9153]

The getter value was called on null error occurs What do I do now?

[@webghost2009]

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.

[@RetroPortalStudio]

The fix has been pushed to git some time ago! ✌😁

[@webghost2009]

@@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?

[@RetroPortalStudio]

@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

[@answer-lq3hz]

@@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?

[@pawanbarbate4187]

onClick() is not working inside transform.......

[@RetroPortalStudio]

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 ✌😁

[@RetroPortalStudio]

You can keep track of the issue here: github.com/flutter/flutter/issues/18408

[@rod5751]

@@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.

[@RetroPortalStudio]

Yes exactly! I have come close to a workaround. But have to clean it a bit ✌ Will post it soon

[@shubhanshusinghdotcom]

@@RetroPortalStudio currently what is the status if you find solution please post it ?

[@aimensh8830]

İs there any updates about the onClick problem?

[@RetroPortalStudio]

Yes the issue is solved but the code for that has changed majorly for performance optimization with new approach. I'll post it soon!

[@aimensh8830]

Great to hear that! Thanks a lot for the great vids

[@MrVwilliam1]

@@RetroPortalStudio Thank u! You were didactic. Nice Tutorial!

[@RetroPortalStudio]

Fix has been posted on git! Community Support ✌😁

[@user-bx8uh4gl6s]

onClick() is not working inside transform.translate, can you give me the solution?

[@youssefmohamed4170]

Do you know the soltion now ?

[@viratkohli2017]

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

[@santosvision]

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

[@santosvision]

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.

[@flifoxali7058]

@@santosvision solution please

[@rush3986]

"On Click" doesn't work for the three inner Circular Buttons :(

[@rush3986]

Checked the previous comments and found the solution through your git repository. Thank you very much....

[@guillermodelacruzonton]

I send a pull request with the simplest solution I could do to solve on click problem

[@RetroPortalStudio]

Merged! Quite a smart fix mate. Kudos! ✌😁

[@user-sj6vg7kz6t]

Not working on environment sdk: ">=2.12

[@excellencemichel4875]

Same issue for me

[@hughesabsalom526]

use "late" key word on the initialization of the animation controller e.g late AnimationController animationController;

[@mawandenxumalo4901]

@@hughesabsalom526 When you use late then you get "LateInitializationError: Field 'degOneTranslationAnimation" has not been initialized."

[@kevinmathew1309]

Thank you