Hello in this video I am going to show you how to add a floating action button for a floating action button basically a button that just sort of seemed like it's on top of everything else in mind not necessarily be linked or with a certain particular layout mechanism on that page and has what's called a floating action button. It is a circular button hovers over all the content, it usually promotes a sort of primary application in the you know, the feature in the application. And that button could not always be there will be there on lots of different pages as the content is changing. So to add in a couple of different ways, so then this way, floating action button in here, we need an event for on pressed. And I'm gonna say yeah, we just do you say Okay, so button pressed and other properties that we can add.
Let's see what happened. Let me just say this is hot reload, we get this button in the center. That's because it's in the center of the body. You could place it wherever you want using rows, columns and padding, etc. If I click it, we get so we have a sore block a highlight effect, didn't trigger them because I'm using my mouse I mean my finger off, it will technically will simulate my finger here. And we can add a child benefit of adding a child is like you won't be empty and what we can do for you but add some text.
Yeah, you add an icon, icon at the bottom. We know God. Okay, that's looking really cool. There are other stuff in terms of the elevation, the highlight elevation. I recommend that you experiment with that the color thing does work if you don't specify the color, the one The color that you've got the primary swatch for you can all go wide, it's a bear that in mind, what I want to do now is show you the other way of creating a floating action button. This is probably the more common way I saw the body still within the scaffold is to do a floating action button.
And in here, we just need to say, floating action button. And here we got essentially, this is a copy of this. So it's pressed. This anchor is at the bottom that the general way that you will have seen it on like this one, no reason why you can't do that. But this is the more common way of doing it. So I'm going to pull this out.
I'll leave it in The source code that will be available on GitHub, in case anyone is interested, you can go a step further and the floating action, floating action button location. floating action button location should not be working do that. Yes, sorry, we could modify the location itself. And because at the moment, it's always in the bottom right, but we can change it. So it you know, basically anywhere that we want it to be, but I want you to have a go at that as an extra task. I, you know, gone in more depth about all of that stuff in the scaffold video, but I wanted to specifically show you how to do it on its own manually and the other way of doing it so I recommend you watch the scaffold video and then the floating action button video as well.
If you have any questions, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.