Level Up your Floating Action Button in Flutter - Interaction like Twitter

so I've spent a lot of time on the Twitter app recently and a couple of days ago I noticed an awesome component this Floating Action button what seems to be just that actually has additional functionality when you long press it then three more quick actions are revealed along a circle Arc around it I wanted to have something like that for future projects so I headed to Google to look if somebody had done something similar to this but I didn't find anything and after I did some more research I decided to do it myself and here is how I did it first we break down the animation in three parts the first is the floating action button itself the second is the quick action buttons that are revealed after the button was pressed and the third is the background that turns slightly opaque let's look closer at the first part it seems like the button is just two layers stacked on top of each other and when the button is pressed it scales down the top layer turns invisible and the bottom layer is revealed to do this in code we first create a stateless widget called quick action icon that has two attributes the icon widget and the background color we create a container with a width and height of 60 we give it the background color and the circle shape and then we pass the icon as the child to The Container the next thing we do is create a quick action floating menu button stateful widget this widget has six attributes two functions called open and close that are called to open and close the menu a function on Tab that is called when the floating action button is tapped a Boolean indicating whether the menu is opened or closed the icon and the background color then we start by creating a stack that Stacks two quick action icons on top of each other the first is the bottom layer it has a white background the icon is the close icon and the icon color is the background color of the layer on top of it the second is the top layer and we pass it the background color and the icon then we wrap the top layer in an animated opacity widget and give it an opacity of 0 or 1 depending on if the menu is opened or closed we created duration constant and pass it to the animated widget we then first wrap everything in a container with a shadow to give the button and elevation effect and then we wrap that in a gesture detector widget we create a variable called expressed that indicates whether we currently press the button or not we add two functions that set the value of this variable and then we pass these functions to the gesture detector then we Define the untapped parameter if the menu is not open we call the function we defined earlier but if it is open we call the close function the last thing we need to add is the on long press function that simply opens the menu if it is closed and also sets the is pressed value to false everything inside the gesture detector is then wrapped inside an animated scale widget we pass it the duration and set the scale to 0.8 if the menu is open or the button is currently pressed or set it to one otherwise we are almost done now the last thing we need to do is Define a wrapper widget for everything we just did we can just call that quick action menu and for now it has four parameters the untype function the icon and the background color that are past the button widget and the child we want to display underneath our button inside our state we Define a Boolean and variable code is open and two functions called open and close that set this variable to true or false and also gives the user a haptic feedback then we create a stack align the children to the bottom right and add the child attribute as the first and the button as a second child we pass the button the necessary parameters and we are done with part one to check our work so far I will use this recipe app that I created one and a half years ago and it looks like we're doing good so let's move on to part two our quick action buttons when we inspect the animation we notice that they are positioned beneath our floating button and then they move out from underneath it we know that we have three icons and they are spaced evenly along the edge of a circle Arc one is placed at the beginning one in the middle and one at the end if we had 90 degrees the first would be at zero degrees the second at 45 and the third at 90. you can already notice the slide offset here but we'll come to that later so let's inspect this motion it consists of two parts one to the left and one upwards that gives us a triangle and trigonometry tells us that the two parts of our motion are defined but the radius of the circle and the angle here let's also give everything a name to calculate the length of a and b we can use the sine and cosine of alpha the sine of alpha is B divided by C and the cosine is a divided by C if we use that we can get formulas for both A and B we are also going to need a formula to convert our angle from degrees to radians with that knowledge we can move on to our code let's first define a class called quick action containing the information for each action it has four attributes the icon the icon color the background color and an untapped function then we Define our widget called quick action button and give it four attributes the quick action object a Boolean value telling us if the menu is open or not the index of our action and a function to close the menu since we wanted to close after the button is pressed let's get to the math first we need two constants one for the radius of the circle and one giving us the value for the offset we noticed earlier we write a getter for the total range we use by taking 90 degrees and subtracting that offset from it then we Define Alpha we just need to divide our range by 2 and multiply it with the index giving us the possible values zero half the range and the total range and then we add our offset but only half of it since we want the other half to be at the end the next thing we do is calculate the radian but first we need to define the helper function that converts degrees to radians we take that function and pass it Alpha now we simply import the dot math package and Define our Getters for A and B according to the formulas we defined for the UI we use a quick action icon widget pasted the values from our quick action object and wrap it in a container giving it a shadow wrap that in a gesture detector copy and paste our pressing logic from the floating button and Define the on tap function so that the menu is first closed and then the action is performed we want the button to scale down when it is pressed we can use an animated scale widget to achieve that and when the menu is closed we want the button to be invisible and then animate its opacity when the menu becomes visible so we wrap everything in an animated opacity widget and set its opacity according to whether the menu is open or not there is also a slight rotation of the icon while it's moving so we add that with an animated rotation widget to actually animate the position we use the animated position to widget we set the right value to a or 0 and the bottom value to b or zero according to the menu State the last thing we need to do is wrap everything inside the widget in a padding widget to align it with our floating button inside the quick action menu we Define an additional attribute called actions which is a list of quick actions and we assert that the value of that list is 3 above the child but underneath the floating action button we add our action widgets using the map function and the spread operator and we're done with part 2. let's go back to our recipe app and check our progress it looks like we're on track the last thing we need to do is the background that turns slightly opaque and closes the menu when pressed that's a simple task we Define a container give it a background color of white with an opacity of 60 percent wrap it in an animated opacity widget that animates the opacity from 0 to 1 when the menu opens and back when the menu closes and wrap the whole thing in an ignore pointer widget because we want to ignore touch events when the menu is closed with that our component looks like this and I would say that this is pretty close to what Twitter has in their app foreign thanks for watching and if you enjoyed the video please consider leaving a like and subscribing to the channel [Music]

Channel: Full Stack

Views: 2,628

Keywords: Flutter, Animations, Twitter, Tutorial, UI, Mobile Development, Level Up, UX, Guide, Full Stack, flutter tutorial, flutter tutorial for beginners, flutter floating action button, floating action button flutter, floating action button

Id: -x--jJ2X4eM

Length: 7min 34sec (454 seconds)

Published: Sun Dec 11 2022