SliverAppBar

6 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.16
List Price:  €129.04
You save:  €36.87
£78.48
List Price:  £109.87
You save:  £31.39
CA$136.70
List Price:  CA$191.38
You save:  CA$54.68
A$150.76
List Price:  A$211.08
You save:  A$60.31
S$134.99
List Price:  S$189
You save:  S$54
HK$780.84
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
NZ$163.34
List Price:  NZ$228.68
You save:  NZ$65.34
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,714.86
List Price:  ৳16,401.27
You save:  ৳4,686.41
₹8,305.04
List Price:  ₹11,627.39
You save:  ₹3,322.35
RM470.40
List Price:  RM658.58
You save:  RM188.18
₦146,115.27
List Price:  ₦204,567.22
You save:  ₦58,451.95
₨27,783.57
List Price:  ₨38,898.11
You save:  ₨11,114.54
฿3,658.80
List Price:  ฿5,122.47
You save:  ฿1,463.66
₺3,220.97
List Price:  ₺4,509.49
You save:  ₺1,288.51
B$516.65
List Price:  B$723.34
You save:  B$206.68
R1,841.76
List Price:  R2,578.54
You save:  R736.77
Лв180.18
List Price:  Лв252.26
You save:  Лв72.07
₩136,656.33
List Price:  ₩191,324.33
You save:  ₩54,668
₪365.88
List Price:  ₪512.25
You save:  ₪146.36
₱5,819.86
List Price:  ₱8,148.04
You save:  ₱2,328.18
¥15,692.93
List Price:  ¥21,970.73
You save:  ¥6,277.80
MX$1,669.81
List Price:  MX$2,337.80
You save:  MX$667.99
QR364.18
List Price:  QR509.87
You save:  QR145.68
P1,356.93
List Price:  P1,899.76
You save:  P542.82
KSh13,033.20
List Price:  KSh18,247
You save:  KSh5,213.80
E£4,712.01
List Price:  E£6,597.01
You save:  E£1,884.99
ብር5,738.47
List Price:  ብር8,034.09
You save:  ብር2,295.62
Kz84,827.41
List Price:  Kz118,761.77
You save:  Kz33,934.36
CLP$90,653.93
List Price:  CLP$126,919.13
You save:  CLP$36,265.20
CN¥710.97
List Price:  CN¥995.39
You save:  CN¥284.42
RD$5,881.38
List Price:  RD$8,234.17
You save:  RD$2,352.78
DA13,444.25
List Price:  DA18,822.49
You save:  DA5,378.24
FJ$226.74
List Price:  FJ$317.44
You save:  FJ$90.70
Q775.80
List Price:  Q1,086.15
You save:  Q310.35
GY$20,895.31
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
DH996.21
List Price:  DH1,394.74
You save:  DH398.52
L1,771.78
List Price:  L2,480.57
You save:  L708.78
ден5,676.40
List Price:  ден7,947.19
You save:  ден2,270.78
MOP$803.71
List Price:  MOP$1,125.23
You save:  MOP$321.51
N$1,835.52
List Price:  N$2,569.81
You save:  N$734.28
C$3,675.86
List Price:  C$5,146.35
You save:  C$1,470.49
रु13,281.76
List Price:  रु18,594.99
You save:  रु5,313.23
S/373.37
List Price:  S/522.73
You save:  S/149.36
K388.13
List Price:  K543.39
You save:  K155.26
SAR374.94
List Price:  SAR524.93
You save:  SAR149.99
ZK2,665.60
List Price:  ZK3,731.94
You save:  ZK1,066.34
L458.57
List Price:  L642.02
You save:  L183.44
Kč2,271.01
List Price:  Kč3,179.50
You save:  Kč908.49
Ft35,372.15
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
ARS$89,042.09
List Price:  ARS$124,662.49
You save:  ARS$35,620.39
Bs690.12
List Price:  Bs966.19
You save:  Bs276.07
COP$386,435.76
List Price:  COP$541,025.52
You save:  COP$154,589.76
₡51,204.17
List Price:  ₡71,687.89
You save:  ₡20,483.71
L2,468.08
List Price:  L3,455.41
You save:  L987.33
₲751,203.84
List Price:  ₲1,051,715.43
You save:  ₲300,511.59
$U3,843.53
List Price:  $U5,381.10
You save:  $U1,537.56
zł391.99
List Price:  zł548.80
You save:  zł156.81
Already have an account? Log In

Transcript

Hello, in this video, I am going to show you a sliver app bar. So what's a sliver app bar? So what you see right here, this, you know, regular sort of app boss level one, level two, not only have a bigger one, but have you ever, I'm sure you you've used an app where you've got quite a big upper. And when you start scrolling on the page, the app bar gets smaller, and he goes to basically this site. That's what we're going to implement. And that's really great for less than showcasing something and then you can hide it afterwards and reveal what's going on wrestler agents like this a very effective technique.

So in the widget build build context area, you want to remove this return because we're not having a scaffold. It is you know, something totally different. So what we need to do is put return custom scroll view. So you will need a custom scroll view which will actually be the automatic scrolling menu. So here you have your no safety bar. So what you need to do is put liveness and then we just put a sliver bar so instead of our regular power press liberal in here we can provide a few different pins equals true banded height.

And this is 150. Obviously, you can experiment and find what works best for you. We say flexible space, flexible space bar. And inside of here, we can just put essentially some basic property like no backgrounds, and Tebow was going to deal with title. So title, it was a text and epic must be epic. said that, let's see what we get.

So yeah, so I think the big at the moment, we can't do any scrolling because we don't have anything to scroll on. And you know, obviously you can modify this, you know the way you want to, and there's some really good other features, or what I'm going to do provide a link to the official documentation. So you can see all of you know, the little nuances that you can customize in custom scroll views and sliver above. Next, what we need to do is add you know, what we're actually scrolling through there's a whole heap of stuff that you know, different types of items we can add, you can add a sliver list, you can add a sliver fixed extent lists, livid grid, you can have a whole heap of other stuff, that's totally up to you the type that you add, and the link that I provide for the official documentation will explain all of that and keep it simple and add a sliver fixed extent list which is basically a list.

So if I put labor six extent lift and in here What we need to do is call item extent. And we can 50 zero and we need to have a delegate. So the delegate will essentially be you know, all of our children in this sliver, sliver, child builder delegate. And then in era we need to build context similar to what we've got here pretty much exactly the same build context and context. And next we need a integer index. So this is just depending on what list item it is to return return container I see the problem, we need curly braces.

And then inside of here we need to return which are regular brackets. And because this is a container, let's put some clothes here there. Because this is a container, you can add essentially, whatever you want in your container. So I'm just gonna do an alignment. So I'm gonna align everything in the Center Alignment center. Let's do let's see what we got.

Let's do soya an accent that looks interesting. And we use that before and now. The next what we want to do is add a child. So here we had one child to just be a pretty simple one. Or what you could do is simply like add a column or a row, which allows you to have multiple children inside of it. At the same time, this added text item and this is a list item, put dollar index your printer, you know the number of the index, then we run it.

I think he's changed. And if we scroll, you can see that this has also changed as well. So we can keep scrolling through it. We do not specify, you know, a child count. They'll just be unlimited items. So let's specify the child for the child can we can do that.

Really simply buy after the comma, count and that's it. We put 20 we get 20. It might be thinking why do you say 19 instead of 20. And that is simply because remember, it starts at zero. So there are 20 items today. And that really is it.

Obviously the way you to, you know, customize your container in terms of color. In terms of the children, if you want to have a row in there, I'll recommend that they'll have multiple other children child widgets inside of it. So you could have an image, you could have some text, imagine if you'd like some sort of blog post or some sort of social networking app. And that's really so applied a link a link with the video for the custom code, so you can check it out for yourself. 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

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.