Drawer

4 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
€92.01
List Price:  €128.82
You save:  €36.80
£78.38
List Price:  £109.74
You save:  £31.35
CA$136.52
List Price:  CA$191.13
You save:  CA$54.61
A$150.48
List Price:  A$210.68
You save:  A$60.19
S$134.87
List Price:  S$188.83
You save:  S$53.95
HK$780.66
List Price:  HK$1,092.95
You save:  HK$312.29
CHF 91.34
List Price:  CHF 127.88
You save:  CHF 36.54
NOK kr1,052.31
List Price:  NOK kr1,473.28
You save:  NOK kr420.96
DKK kr686.58
List Price:  DKK kr961.24
You save:  DKK kr274.66
NZ$162.83
List Price:  NZ$227.97
You save:  NZ$65.13
د.إ367.25
List Price:  د.إ514.17
You save:  د.إ146.91
৳11,719.82
List Price:  ৳16,408.23
You save:  ৳4,688.40
₹8,312.02
List Price:  ₹11,637.16
You save:  ₹3,325.14
RM469.75
List Price:  RM657.67
You save:  RM187.92
₦147,331.26
List Price:  ₦206,269.66
You save:  ₦58,938.40
₨27,796.36
List Price:  ₨38,916.02
You save:  ₨11,119.65
฿3,662.34
List Price:  ฿5,127.43
You save:  ฿1,465.08
₺3,217.98
List Price:  ₺4,505.30
You save:  ₺1,287.32
B$517.06
List Price:  B$723.91
You save:  B$206.84
R1,837.02
List Price:  R2,571.91
You save:  R734.88
Лв180.27
List Price:  Лв252.38
You save:  Лв72.11
₩136,066.92
List Price:  ₩190,499.14
You save:  ₩54,432.21
₪368.12
List Price:  ₪515.38
You save:  ₪147.26
₱5,814.46
List Price:  ₱8,140.48
You save:  ₱2,326.02
¥15,687.99
List Price:  ¥21,963.82
You save:  ¥6,275.82
MX$1,668.59
List Price:  MX$2,336.09
You save:  MX$667.50
QR364.34
List Price:  QR510.10
You save:  QR145.75
P1,357.56
List Price:  P1,900.64
You save:  P543.07
KSh13,298.67
List Price:  KSh18,618.67
You save:  KSh5,320
E£4,713.99
List Price:  E£6,599.78
You save:  E£1,885.78
ብር5,741.12
List Price:  ብር8,037.80
You save:  ብር2,296.67
Kz84,932.10
List Price:  Kz118,908.34
You save:  Kz33,976.24
CLP$90,081.08
List Price:  CLP$126,117.11
You save:  CLP$36,036.03
CN¥724.33
List Price:  CN¥1,014.10
You save:  CN¥289.76
RD$5,884.09
List Price:  RD$8,237.97
You save:  RD$2,353.87
DA13,459.27
List Price:  DA18,843.53
You save:  DA5,384.25
FJ$222.79
List Price:  FJ$311.92
You save:  FJ$89.12
Q776.15
List Price:  Q1,086.64
You save:  Q310.49
GY$20,904.26
List Price:  GY$29,266.81
You save:  GY$8,362.54
ISK kr13,793.62
List Price:  ISK kr19,311.62
You save:  ISK kr5,518
DH996.63
List Price:  DH1,395.33
You save:  DH398.69
L1,771.78
List Price:  L2,480.56
You save:  L708.78
ден5,664.24
List Price:  ден7,930.17
You save:  ден2,265.92
MOP$804.05
List Price:  MOP$1,125.70
You save:  MOP$321.65
N$1,836.30
List Price:  N$2,570.90
You save:  N$734.59
C$3,677.56
List Price:  C$5,148.73
You save:  C$1,471.17
रु13,287.88
List Price:  रु18,603.56
You save:  रु5,315.68
S/373.53
List Price:  S/522.95
You save:  S/149.42
K388.30
List Price:  K543.64
You save:  K155.33
SAR375.02
List Price:  SAR525.05
You save:  SAR150.02
ZK2,666.83
List Price:  ZK3,733.66
You save:  ZK1,066.83
L457.94
List Price:  L641.14
You save:  L183.19
Kč2,276.37
List Price:  Kč3,187.01
You save:  Kč910.64
Ft35,391.42
List Price:  Ft49,549.41
You save:  Ft14,157.98
SEK kr1,062.40
List Price:  SEK kr1,487.41
You save:  SEK kr425
ARS$89,066.09
List Price:  ARS$124,696.09
You save:  ARS$35,630
Bs690.41
List Price:  Bs966.60
You save:  Bs276.19
COP$385,967.67
List Price:  COP$540,370.17
You save:  COP$154,402.50
₡51,227.77
List Price:  ₡71,720.93
You save:  ₡20,493.15
L2,469.21
List Price:  L3,457
You save:  L987.78
₲751,546.38
List Price:  ₲1,052,195.01
You save:  ₲300,648.62
$U3,849.38
List Price:  $U5,389.29
You save:  $U1,539.90
zł391.29
List Price:  zł547.82
You save:  zł156.53
Already have an account? Log In

Transcript

Hello, in this video we are going to look at the drawer navigation component. So the drawer navigation component is basically that little burger button that usually appears here on application, you can click on it. And basically load drawer opens up with extra selection items that are displayed everything on the screen at once. It sort of hides the items, but you can easily access them. So it's really good for navigation and creating a smooth slick user interface to do this really simple draw, draw up the drawer class. And inside of here is where we you know, everything has a few different things you can deal with elevation child key and semantic label.

The other thing we're interested in at the moment the child bond provide the official documentation link so you can check out every little aspect of it. And for the child, kids add one child that's been hired for the war recommend Is that you add a column, and inside the column, you obviously have children. And here you put all of the items that you can have any sort of item that images text, but to get the best format, what you want to do is put a list title and the lift title, we completely did. And we can put an icon for this. So he has an icon to represent what is happening or what is being displayed after the icon was gonna say icons dot and then complete, let's say along and we can have full stops that are comma, comma. We can have some more information with quite a few stuff here that we can do.

We can also have a look at gestures like on top and on long press. We're going to implement on tap very short soon shortly. We're just gonna put title, text. And we're gonna save this see what we get. When we go to advocacy it is right there at the moment, it doesn't do anything when we click it, let's do the on tap function. So who's just on sorry, is meant to go inside of the list toggle, you can have as many lists as you want on tap for the on top.

We can even call a method that we, you know, might create separately here. Or we can do an inline method. I'll just do quickly an inline method. But again, it's totally up to you. Here. You would not do any of your code in terms of changing the app state.

So for example, to taking you to different pay different way you would do it at the vessel. The completion date afterwards, you would do navigator is optional, but it's good practice to do this navigator dot pop. And this will basically close the draw navigation component after you've selected because you don't want to have to manually close yourself extra tasks that users don't want to do. The first time you come along, we go back to it, when we click it, as you can see, is nice clickable, obviously we can do this, but this will close it and if nothing here, we said change age for example. I go on to and I just go off like that. Nothing is printed.

I'll go into it. Go off to like that nothing is printed before going to it. Click it to close it, but it also sees change. So that code is only triggered when you successfully click that particular item. One problem you might be seen is that it's a little too high up. That's what we used to do as an exit task is big right?

How to actually reposition now the items. So it's, you know more in line with the way most of the application standards are. And it's just easy to see because this is actually cut off slightly by this top bar here. So how about that? If you have any questions, though, feel free to pop me a message until usual, 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.