Тёмный

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

RetroPortal Studio
Подписаться 47 тыс.
Просмотров 30 тыс.
50% 1

Опубликовано:

 

8 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 113   
@hernancorrea2146
@hernancorrea2146 4 года назад
i have never really understood the flutter animations until now, thank u so much, greetings from colombia
@jrcleber
@jrcleber 3 года назад
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
@alansantos4897 3 года назад
Man, congrats to make this amazing class! Wow! You got new subscriber right now!
@jorgwei8590
@jorgwei8590 2 года назад
Again, excellent video; great stuff. Let's feed some excited sentiment into the algorithm. I'm engaged!
@vmkantu
@vmkantu 3 года назад
This covers a lot of animation basics ! Awesome.
@RetroPortalStudio
@RetroPortalStudio 4 года назад
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
@sayanchakraborty1503 3 года назад
hey could u tell me where the change is for the onClick detection, couldn't find it on git
@RetroPortalStudio
@RetroPortalStudio 3 года назад
@@sayanchakraborty1503 Line 73 , 75-81
@sayanchakraborty1503
@sayanchakraborty1503 3 года назад
@@RetroPortalStudio thank got it, great video as always
@thedartside1050
@thedartside1050 3 года назад
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
@RetroPortalStudio 3 года назад
Thank you so much 💎💙😁
@MdSiam-kw5ox
@MdSiam-kw5ox 2 года назад
Thanks for sharing this awesome tutorial.
@sergiolopez7338
@sergiolopez7338 3 года назад
Muchísimas gracias, me ha sido de gran ayuda el tutorial, ¡saludos desde España!
@rafidev2099
@rafidev2099 4 года назад
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
@everydaystoriesanimated2318 4 года назад
High Quality Video. KEEP UPLOADING... 👍
@DaveTradeFx_01
@DaveTradeFx_01 4 года назад
amazing vdo, clear explanation keep going
@fcbheart
@fcbheart 4 года назад
Great tutorial! Please, don't stop!
@theethicalh3707
@theethicalh3707 4 года назад
thank you veryy much man this is a very high quality and informative video
@rakharuan
@rakharuan 3 года назад
Love ALL of your tutorials
@naminh674
@naminh674 3 года назад
nice tutorial. i like it
@Mervel122
@Mervel122 3 года назад
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
@masoudh6856 2 года назад
this is my problem too . did you find any solution for this problem?
@anshgoutam9681
@anshgoutam9681 4 года назад
Brother your best
@MustafaYldz-wl5vx
@MustafaYldz-wl5vx 3 года назад
very nice
@mumenahmed3461
@mumenahmed3461 2 года назад
Hero
@CodeWithSrini
@CodeWithSrini 4 года назад
Thank You soo much, u saved my time.
@Nobody-ky7sl
@Nobody-ky7sl 4 года назад
Awesome thanks!!!
@reemosman2207
@reemosman2207 4 года назад
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
@RetroPortalStudio 4 года назад
Fix for this has been posted on git repo! ✌😁
@djamel_sebbagh
@djamel_sebbagh 4 года назад
Thank you
@greenhelix
@greenhelix 4 года назад
thx awesome video... peace!!
@atahaneser8863
@atahaneser8863 4 года назад
Amazing 👌🏽
@icscybersecure
@icscybersecure 4 года назад
Ras aa gaya
@sidronio
@sidronio 4 года назад
Nice video! Thanks! It could be done with ImplicitlyAnimatedWidget like AnimatedPositioned?
@RetroPortalStudio
@RetroPortalStudio 4 года назад
Not with ease 😅
@VJKoding
@VJKoding 4 года назад
Amazing bro ❤️
@turbogoose64
@turbogoose64 2 года назад
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
@masoudh6856 2 года назад
this is my problem too . did you find any solution for this problem?
@turbogoose64
@turbogoose64 2 года назад
@@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
@wandjimikhael8487 4 года назад
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
@RetroPortalStudio 4 года назад
Fix has been posted to git! ✌😁
@wandjimikhael8487
@wandjimikhael8487 4 года назад
@@RetroPortalStudio Thanks a lot
@xRruiiz
@xRruiiz 4 года назад
onClick not working inside transform.translate, I've tried everything, any solution 24/04/2020?
@reemosman2207
@reemosman2207 4 года назад
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
@pietrovr46
@pietrovr46 4 года назад
@@reemosman2207 i also need a fix for this bug
@1motsem
@1motsem 4 года назад
i have the same problem losing onPress when using transform operations, kindly any help :)
@RetroPortalStudio
@RetroPortalStudio 4 года назад
Fix for this has been posted on Git! Thanks ✌😁
@xRruiiz
@xRruiiz 4 года назад
@@RetroPortalStudio Thank you! :)
@nishitpatel5599
@nishitpatel5599 2 года назад
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
@mual77 4 года назад
WOW!!
@fatihdemir450
@fatihdemir450 3 года назад
you did a great job, can I use it in my project?
@abhishekchandane87
@abhishekchandane87 3 года назад
Please also show onclick event working of all widgets
@fathimashafana4881
@fathimashafana4881 3 года назад
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
@Surimi888 3 года назад
Do you think it would be possible to embed this pseudo-FAB in a bottom navbar?
@greenhelix
@greenhelix 4 года назад
one question. Is it possible circularbutton put in Scaffold( floatingActionButton: ) ->child?
@hamzahasan5286
@hamzahasan5286 3 года назад
can someone help how to add null safety to this
@vrajendramandloi5917
@vrajendramandloi5917 3 года назад
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
@RetroPortalStudio 3 года назад
Fix has been updated on git repository please check 😁
@vrajendramandloi5917
@vrajendramandloi5917 3 года назад
@@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
@priyarajchanda7388 3 года назад
how to dock it in my bottom navigation bar?? Please help
@pierremarchini237
@pierremarchini237 4 года назад
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
@pierremarchini237 4 года назад
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
@darianaguila9465 4 года назад
How can I close the animated Circular FAB when I change the page if it is open
@Hasibuzzamantaz
@Hasibuzzamantaz 4 года назад
The onClick Funtion of the smaller buttons dsnt work.... or is it just me ?
@RetroPortalStudio
@RetroPortalStudio 4 года назад
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
@mrp10012 4 года назад
@@RetroPortalStudio thank you, I'm now "Watching" the github project, will that be enough to get me notified when there's news?
@tieno8663
@tieno8663 3 года назад
In 1:02 how can you declare those properties so fast
4 года назад
I did same thing. But onClick function is not working.
@RetroPortalStudio
@RetroPortalStudio 4 года назад
Please check the git! Fix has been updated ✌😁
4 года назад
@@RetroPortalStudio Thank You.
@mrlucky9153
@mrlucky9153 3 года назад
The getter value was called on null error occurs What do I do now?
@webghost2009
@webghost2009 3 года назад
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
@RetroPortalStudio 3 года назад
The fix has been pushed to git some time ago! ✌😁
@webghost2009
@webghost2009 3 года назад
@@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
@RetroPortalStudio 3 года назад
@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
@answer-lq3hz 3 года назад
@@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
@pawanbarbate4187 4 года назад
onClick() is not working inside transform.......
@RetroPortalStudio
@RetroPortalStudio 4 года назад
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
@RetroPortalStudio 4 года назад
You can keep track of the issue here: github.com/flutter/flutter/issues/18408
@rod5751
@rod5751 4 года назад
@@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
@RetroPortalStudio 4 года назад
Yes exactly! I have come close to a workaround. But have to clean it a bit ✌ Will post it soon
@shubhanshusinghdotcom
@shubhanshusinghdotcom 4 года назад
@@RetroPortalStudio currently what is the status if you find solution please post it ?
@aimensh8830
@aimensh8830 4 года назад
İs there any updates about the onClick problem?
@RetroPortalStudio
@RetroPortalStudio 4 года назад
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
@aimensh8830 4 года назад
Great to hear that! Thanks a lot for the great vids
@MrVwilliam1
@MrVwilliam1 4 года назад
@@RetroPortalStudio Thank u! You were didactic. Nice Tutorial!
@RetroPortalStudio
@RetroPortalStudio 4 года назад
Fix has been posted on git! Community Support ✌😁
@user-bx8uh4gl6s
@user-bx8uh4gl6s 4 года назад
onClick() is not working inside transform.translate, can you give me the solution?
@youssefmohamed4170
@youssefmohamed4170 3 года назад
Do you know the soltion now ?
@viratkohli2017
@viratkohli2017 4 года назад
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
@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
@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
@flifoxali7058 Год назад
@@santosvision solution please
@rush3986
@rush3986 3 года назад
"On Click" doesn't work for the three inner Circular Buttons :(
@rush3986
@rush3986 3 года назад
Checked the previous comments and found the solution through your git repository. Thank you very much....
@guillermodelacruzonton
@guillermodelacruzonton 4 года назад
I send a pull request with the simplest solution I could do to solve on click problem
@RetroPortalStudio
@RetroPortalStudio 4 года назад
Merged! Quite a smart fix mate. Kudos! ✌😁
@user-sj6vg7kz6t
@user-sj6vg7kz6t 2 года назад
Not working on environment sdk: ">=2.12
@excellencemichel4875
@excellencemichel4875 2 года назад
Same issue for me
@hughesabsalom526
@hughesabsalom526 2 года назад
use "late" key word on the initialization of the animation controller e.g late AnimationController animationController;
@mawandenxumalo4901
@mawandenxumalo4901 9 месяцев назад
@@hughesabsalom526 When you use late then you get "LateInitializationError: Field 'degOneTranslationAnimation" has not been initialized."
@kevinmathew1309
@kevinmathew1309 4 года назад
Thank you
Далее
The perfect imperfection of Google's Material You
15:47
Top 10 Widgets every Flutter Developer should know!
17:17
Flutter Design Tutorial | Minimal UI - Part 1
8:31
Просмотров 117 тыс.
Top 30 Flutter Tips and Tricks
6:50
Просмотров 553 тыс.
Git Tutorial For Dummies
19:25
Просмотров 1,1 млн