Animated Circular Menu in Flutter using GetX || Flutter || GetX

hi my name is amar in this video i will discuss about animated circular menu in flutter using get x as you can see in the output if i click on this button then this animated menu is displayed and if i click on this button again then this is closed i can generate that menu by clicking on this icon as well how to achieve this that person i will discuss today here i have created this project by using the gate cli tool after creating the project in the spec.ml file i have taken fab circular menu dependency right now let me move to home view in the home view you can see in the body i have taken a central widget and as a child of the center widget here i have taken an elevated button having the text as perform action as you can see in the output right now in the floating action button i have used builder in the builder i have used fabs circular menu this widget is provided by the dependency which i have taken in the pubspec.eml file right now in the alignment i have used alignment dot bottom right that's why this is displayed in this bottom right remember you cannot use center here right after that there is a ring color now this ring color is nothing but this ring color where i have specified colors dot blue with opacity 0.4 right in the ring diameter i have specified the value as 450 right this is the ring diameter next we have a ring width where i have specified the value as 100 this is the ring width right after that we have fab size the fab size is 64. fab elevation fab size means this size this size is 64. and in the elevation i have specified the value as 8.0 next we have fab icon border here i have specified the border as circle border now since i have not given the border width that's why the border is not visible here right after that fab color which is blue accent as you can see in the output this is the fab color next we have fab open icon as you can see here i have used the icon as menu which is displayed here and in the file close icon i have used icons dot close that's why when i click here then you can see the close icon is displayed next we have fab margin and after that we have that animation duration animation curve for displaying the animations and all right next we have on display change here i have written print is open actually this on display change will take the state of this animated menu whether it is opened or closed if it is open then true will be stored here and if it is closed false will be stored here right now what items will be displayed in this animated menu circular menu for that here i have used a raw material button in the on page we need to write some code as per our requirement in the shape here i have used circle border and i have given the width as one and in the color i have specified colors dot blue that's why you can see here that a blue border is displayed in the circle for the circle that blue border is there and the border width is one and in the child here i have used icons dot home having the color as blue that's why the home icon is displayed with blue color similarly i have created all these three items for this animated menu as you can see here right now what my requirement is that whenever i will click here means whenever i will click on any menu item at that time this should be closed now if i click here then see it is not closing if you want to close it then you need to write some code and that i will write let me move to home controller in the home controller here i need to use a global key global key and after that here i will use fab circular menu state right and here i will give the name as fab key equals to global key fine after that here i will create a method open close fab menu now inside this method first of all i will check if fab key dot current state dot is open if it is open then what will happen i need to close the animated menu and to do that fab key dot current state dot i need to use the close method right and in the else portion what we need to do we need to open the animated menu and for that here i will simply paste it and instead of close here i will use the open method right so whenever you are clicking on this button at that time first up it will check whether it is animated menu is open or not if it is open then what it will do it will close it and if it is not opened then it will open the animated menu right now my next requirement is that whenever i will click on any of the animated icon or animated menu then the animated circular menu should be closed and to do that i will move to home view in the home view let's say i want to write the code for this first raw material button so here i will write controller dot fab key dot current state dot close method that's it this is how we can use or create animated circular menu in flutter using get x i hope you have enjoyed my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 2,614

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, animated circular menu flutter, circular menu flutter, animated circular menu flutter getx, circular menu flutter getx, circular fab menu flutter, circular fab menu flutter getx

Id: KKYaun4XWvY

Length: 6min 1sec (361 seconds)

Published: Sun Apr 03 2022