Floating Action Button

4 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €129.04
You save:  €36.87
List Price:  £109.87
You save:  £31.39
List Price:  CA$191.38
You save:  CA$54.68
List Price:  A$211.08
You save:  A$60.31
List Price:  S$189
You save:  S$54
List Price:  HK$1,093.20
You save:  HK$312.36
CHF 91.55
List Price:  CHF 128.17
You save:  CHF 36.62
NOK kr1,058.18
List Price:  NOK kr1,481.49
You save:  NOK kr423.31
DKK kr688.07
List Price:  DKK kr963.32
You save:  DKK kr275.25
List Price:  NZ$228.68
You save:  NZ$65.34
List Price:  د.إ514.18
You save:  د.إ146.92
List Price:  ৳16,401.27
You save:  ৳4,686.41
List Price:  ₹11,627.39
You save:  ₹3,322.35
List Price:  RM658.58
You save:  RM188.18
List Price:  ₦204,567.22
You save:  ₦58,451.95
List Price:  ₨38,898.11
You save:  ₨11,114.54
List Price:  ฿5,122.47
You save:  ฿1,463.66
List Price:  ₺4,509.49
You save:  ₺1,288.51
List Price:  B$723.34
You save:  B$206.68
List Price:  R2,578.54
You save:  R736.77
List Price:  Лв252.26
You save:  Лв72.07
List Price:  ₩191,324.33
You save:  ₩54,668
List Price:  ₪512.25
You save:  ₪146.36
List Price:  ₱8,148.04
You save:  ₱2,328.18
List Price:  ¥21,970.73
You save:  ¥6,277.80
List Price:  MX$2,337.80
You save:  MX$667.99
List Price:  QR509.87
You save:  QR145.68
List Price:  P1,899.76
You save:  P542.82
List Price:  KSh18,247
You save:  KSh5,213.80
List Price:  E£6,597.01
You save:  E£1,884.99
List Price:  ብር8,034.09
You save:  ብር2,295.62
List Price:  Kz118,761.77
You save:  Kz33,934.36
List Price:  CLP$126,919.13
You save:  CLP$36,265.20
List Price:  CN¥995.39
You save:  CN¥284.42
List Price:  RD$8,234.17
You save:  RD$2,352.78
List Price:  DA18,822.49
You save:  DA5,378.24
List Price:  FJ$317.44
You save:  FJ$90.70
List Price:  Q1,086.15
You save:  Q310.35
List Price:  GY$29,254.27
You save:  GY$8,358.96
ISK kr13,818.61
List Price:  ISK kr19,346.61
You save:  ISK kr5,528
List Price:  DH1,394.74
You save:  DH398.52
List Price:  L2,480.57
You save:  L708.78
List Price:  ден7,947.19
You save:  ден2,270.78
List Price:  MOP$1,125.23
You save:  MOP$321.51
List Price:  N$2,569.81
You save:  N$734.28
List Price:  C$5,146.35
You save:  C$1,470.49
List Price:  रु18,594.99
You save:  रु5,313.23
List Price:  S/522.73
You save:  S/149.36
List Price:  K543.39
You save:  K155.26
List Price:  SAR524.93
You save:  SAR149.99
List Price:  ZK3,731.94
You save:  ZK1,066.34
List Price:  L642.02
You save:  L183.44
List Price:  Kč3,179.50
You save:  Kč908.49
List Price:  Ft49,522.43
You save:  Ft14,150.27
SEK kr1,066.73
List Price:  SEK kr1,493.46
You save:  SEK kr426.73
List Price:  ARS$124,662.49
You save:  ARS$35,620.39
List Price:  Bs966.19
You save:  Bs276.07
List Price:  COP$541,025.52
You save:  COP$154,589.76
List Price:  ₡71,687.89
You save:  ₡20,483.71
List Price:  L3,455.41
You save:  L987.33
List Price:  ₲1,051,715.43
You save:  ₲300,511.59
List Price:  $U5,381.10
You save:  $U1,537.56
List Price:  zł548.80
You save:  zł156.81
Already have an account? Log In


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.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.