Appbar

5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€93.20
List Price:  €130.49
You save:  €37.28
£79.91
List Price:  £111.88
You save:  £31.96
CA$136.56
List Price:  CA$191.19
You save:  CA$54.63
A$153.05
List Price:  A$214.27
You save:  A$61.22
S$136.08
List Price:  S$190.51
You save:  S$54.43
HK$782.75
List Price:  HK$1,095.88
You save:  HK$313.13
CHF 91.21
List Price:  CHF 127.70
You save:  CHF 36.49
NOK kr1,100.23
List Price:  NOK kr1,540.37
You save:  NOK kr440.13
DKK kr695.05
List Price:  DKK kr973.10
You save:  DKK kr278.04
NZ$168.07
List Price:  NZ$235.31
You save:  NZ$67.23
د.إ367.25
List Price:  د.إ514.16
You save:  د.إ146.91
৳10,970.75
List Price:  ৳15,359.49
You save:  ৳4,388.74
₹8,335.10
List Price:  ₹11,669.48
You save:  ₹3,334.37
RM476.90
List Price:  RM667.68
You save:  RM190.78
₦130,608.93
List Price:  ₦182,857.73
You save:  ₦52,248.80
₨27,840.21
List Price:  ₨38,977.41
You save:  ₨11,137.19
฿3,694.31
List Price:  ฿5,172.18
You save:  ฿1,477.87
₺3,253.72
List Price:  ₺4,555.34
You save:  ₺1,301.61
B$515.88
List Price:  B$722.26
You save:  B$206.37
R1,886.05
List Price:  R2,640.54
You save:  R754.49
Лв182.13
List Price:  Лв254.99
You save:  Лв72.85
₩137,567.94
List Price:  ₩192,600.62
You save:  ₩55,032.68
₪380.78
List Price:  ₪533.11
You save:  ₪152.32
₱5,769.12
List Price:  ₱8,077
You save:  ₱2,307.87
¥15,680.08
List Price:  ¥21,952.74
You save:  ¥6,272.66
MX$1,724.22
List Price:  MX$2,413.98
You save:  MX$689.75
QR364.68
List Price:  QR510.56
You save:  QR145.88
P1,379.77
List Price:  P1,931.74
You save:  P551.96
KSh13,498.65
List Price:  KSh18,898.65
You save:  KSh5,400
E£4,789.68
List Price:  E£6,705.74
You save:  E£1,916.06
ብር5,693.24
List Price:  ብር7,970.76
You save:  ብር2,277.52
Kz83,560.30
List Price:  Kz116,987.77
You save:  Kz33,427.46
CLP$94,840.51
List Price:  CLP$132,780.51
You save:  CLP$37,940
CN¥724.59
List Price:  CN¥1,014.46
You save:  CN¥289.86
RD$5,873.12
List Price:  RD$8,222.61
You save:  RD$2,349.48
DA13,427.17
List Price:  DA18,798.58
You save:  DA5,371.40
FJ$225.97
List Price:  FJ$316.37
You save:  FJ$90.39
Q777.73
List Price:  Q1,088.86
You save:  Q311.12
GY$20,914.34
List Price:  GY$29,280.91
You save:  GY$8,366.57
ISK kr13,988.60
List Price:  ISK kr19,584.60
You save:  ISK kr5,596
DH1,011.63
List Price:  DH1,416.33
You save:  DH404.69
L1,776.81
List Price:  L2,487.61
You save:  L710.79
ден5,738.79
List Price:  ден8,034.54
You save:  ден2,295.74
MOP$805.67
List Price:  MOP$1,127.97
You save:  MOP$322.30
N$1,914.68
List Price:  N$2,680.63
You save:  N$765.95
C$3,678.96
List Price:  C$5,150.69
You save:  C$1,471.73
रु13,310.19
List Price:  रु18,634.81
You save:  रु5,324.61
S/372.97
List Price:  S/522.18
You save:  S/149.20
K385.04
List Price:  K539.08
You save:  K154.03
SAR375.02
List Price:  SAR525.04
You save:  SAR150.02
ZK2,631.59
List Price:  ZK3,684.33
You save:  ZK1,052.74
L463.78
List Price:  L649.31
You save:  L185.53
Kč2,343.96
List Price:  Kč3,281.64
You save:  Kč937.68
Ft36,581.40
List Price:  Ft51,215.43
You save:  Ft14,634.02
SEK kr1,089.92
List Price:  SEK kr1,525.94
You save:  SEK kr436.01
ARS$87,365.86
List Price:  ARS$122,315.70
You save:  ARS$34,949.84
Bs692.26
List Price:  Bs969.20
You save:  Bs276.93
COP$394,057.74
List Price:  COP$551,696.60
You save:  COP$157,638.86
₡50,249.28
List Price:  ₡70,351
You save:  ₡20,101.72
L2,468.18
List Price:  L3,455.56
You save:  L987.37
₲742,598.03
List Price:  ₲1,039,666.95
You save:  ₲297,068.91
$U3,834.62
List Price:  $U5,368.62
You save:  $U1,534
zł402.81
List Price:  zł563.95
You save:  zł161.14
Already have an account? Log In

Transcript

Hello, in this video, I am going to go into more depth for the app bar. So if we go to our application, this little top part here is the bot. So this is part of the scaffold class and the app bar. So far, we just have a text item, which is this right here, and we have the background color, which is set based on on this theme, but the color itself can be overridden. So if we go into the property that we can add controls by, you can see all and you can change the brightness, the opacity, you can change the lead in only to have a go at doing that. And I will provide a link so you can get information about all of this extra stuff.

But what we can also do which is really cool is that actions that we should basically buttons and do that by just putting in was already on the right one clearly actions code on angle brackets widget code on Square angle brackets, and square brackets. And then in here, you basically put your widgets, you can put whatever widget you want. But what I'm going to do, because you could put, you know, a text item, so you could have images in the app, but there's a built in icon so you can do icon button. And in here, we need an icon to icon and the icon constructor, and go to icon, dot. And here are all of the different icons that you can leverage. There are a lot I computed.

One of the things I love about flutter, and also Android Studio, one Android Studio show the preview so you can actually see what they look like. They're constantly having to switch the mess and get a rough idea. And to the left, so many built in. So if I go seven, the call to do something regarding it. And yeah, that's Yeah, let's do this one. So Okay, now I'm gonna do something else.

Let's do a call one call. Again, we're not adding any call functionality, but you'll see and I'll explain why I've chosen this one, then you can add a tooltip. And for the tooltip, I'm gonna say, contact. And you know, you can see all the other properties while regarding alignment, you know, the disabled color, the highlight color, the regular color, the one we want to do is on crest, and this will basically call a particular method. So I added this before don't need that. But we can say, call contact.

It's red because there's no method called called contact but he has a void. on tap. And in here, we can print to say saved. And as you can see, we have a cold button. So imagine if this was the page for our contacts, we could know how about hot buttons here that are just generic to each contact. And if I click it, as you can see it says cooling contact for click it again, says calling contact.

Obviously, the functionality that you want to implement is totally up to you. And yes, you probably already be wondering, can you add multiple icons? Yes, you can. So the process is exactly the same at the end of the day. This is a widget array, so you can add as many widgets as you want. So you could add in a text item, it's gonna stick with icon because they look really nice.

And so for this one, I'm going to put instead of cool also, so like if we want to add some more information for the contact information on top Well, some say info to contact, save some time off, copy this, I'll go here. And I'm saying add info, adding info. So for that, let's see what we get. So we got both of the buttons. So the first icon added will be to the left most area and the next icon it will be to the right and so forth. If I click the Add button, it calls the adding input contacts.

So the on press is like calling any of the methods so you can, you know, pass in parameters if you want to as well. So that's really it for the app bar. Like I said, there are other property that you can no use. You can use, you know, like background, muscle color, the opacity, the leading the, you know, the actual To the TextView, a whole heap of stuff and as an extra test, I recommend that you tweak all of this. If you have any questions, feel free to drop me a message and illegal. I look forward to seeing you in the next video.

Sign Up

Share

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.