Hello. Everyone, I'm. Philip this is the flower boring show and with me today is Ian Aiello. So, Ian what do you do in flower I am the tio all, right what does it mean that means a little technique that means all the, mistakes, we've made are much more right, yes. On. Github Eunice, Hicks II so, if, you're following the. Project you've probably seen. XE, a lot so. In, today, we're going to talk about slivers. Which, is a scary topic for many maybe. It's. Not the simplest of our write API nice. On. The other hand many people don't really need to know slivers write as many things are done for them but, like this is an, advanced class. What. Is the sliver a sliver. Maybe, that's to take a step back before we talk about Slough is a we should talk about how. Flutter, does layout in general so in flutter we have. Render. Objects and render. Objects, are most, of the render objects you'll see a render boxes and. So for example container, and size box and so on are all render boxes render. Boxes, have. Cartesian. Coordinates they have a width and a height and, the way they layout is you give them a minimum and maximum width and a minimum maximum height and then, they look. At their children they lay out their children I do whatever they want with them and then they decide I'm gonna be this width in this height and it has to be within the constraints they were given that. Looks great for boxes, it doesn't work great for scrolling to, key when you do things like app bars, and, and other weird scrolling, effects and so, to, do scrolling, we have a different protocol that we hold a sliver protocol, sliver as in a slice, of something so, a slice of something that scrolls and, in the sliver protocol, there, are, many. Different axes, if. We look at the documentation, for. Render. Sliver you'll. Find. The, protocol. That it, uses. Yes. So, we, use instead, of using. The. Min/max, height, and width we, have sliver. Constraints, and. If you click on sliver constraints you'll see there are many axes, here this literally, the axis, that's the direction in which it's scrolling the access. Direction, whether it's going backwards and forwards we, have the cross axis direction, which is the the, other direction. If you have a grid for example it's scrolling, up and down say but is then going left and right in the cross axis. There. Are many other aspects. There's how much we. Scrolled how much overlap, there is with the previous sliver and so on and so all of these are the. Incoming, constraints. For a sliver, and if we go to sleep, a geometry you'll, see the equivalent, of size, on the render box side on, the render sliver side is. How. Big. You are that's the paint extent, how. Where. The next sliver should be that's the layout extent. And. So forth and there's a again there's a whole number, of. Values. Here the, main set so, so okay, so to, summarize for, a box I only take, like a off setting and size, and. I give, you I'm sorry constraints, and. Then, I give you offset, in size the. Offset slightly is technically part of the painting, right, you can think of it as part of the layout it right it's awesome how we do it but, from slivers, you, get all these things and then you can decide whatever okay, it's right and, the reason we do that is for. Example to do one. Of the app bars of the stretches, and grows as, you scroll well. The app bar needs to know how far you've scrolled so it knows how big, it should be it needs to know where. The next. Sliver. For example a sliver list where, that should be we, also use it to do things like lazy. Loading, of content in lists so, when you have a ListView, say we, don't actually instantiate, all of the boxes you know all the million boxes of your list we only instantiate, the ones on the screen and a little before a little after for caching access, building and we. Do that by using this protocol, where we, look at how. Far we scrolled we're, like okay we'll start building boxes here, how far is left on a page that's the remaining, paint extent on the sliver constraints and. Then we'll stop rendering. Boxes, and so we only render the ones that are actually necessary. So. Okay so. So. Now that we kind, of know what sliver is and what's there comes the. Slaver protocol, is I, thought. We might want to try one. Of the more advanced. Things that, are using slivers and that is the sliver at bar. But. Like to be clear, you, know as you said even ListView, is using slivers right, okay, pretty much everything that Scrolls in flutter, is using slivers there's one exception we, have a I.
Figured What it's called the one box a viewport or something that. Is a viewport, that lets you scroll a single, item around, uh-huh, that's, the exception in that one you don't usually use cuz it's not lazy it's, only useful if you have to say the, contents of a dialog box which are almost always on the screen but, you're worried that if the screen is too small or if the keyboard comes up and shrinks the dialog they might not quite fit and so you'll you'll want to scroll in write things like that so, there it doesn't matter if you're lazy because you're gonna have everything instantiated, anyway normally right but anytime you have a list, where you don't know how many things are in the list use, list view use grid view custom. Scroll view all those are using slivers under the hood right um. Okay, so what we're going. To do. Is. First. Of all use. The sliver app bar right so we have a small. App here. And. It's. Just uh you, know a list. Of, randomly. Generated startup names like. Mass. Bin or flood, wolf and. We. Want, this. Thing to be kind, of a little. More interesting. Than just like you know being there right now it's like a box right, so. Here. Is this. Ad bar, yep it's. Very simple API what. Happens, if we use this fully Brett bar person, not gonna be happy yeah. So. What. I do, so. Oh no okay, yeah. You can you the sniffer app bar it turns out is not an app bar for the personal scaffold, so that the the, way to do a slip app bar the, way that I remember how to do it is to go look up sliver, app bar in the documentation. And. If I remember correctly I put there an answer for how to actually, do. This okay. In. Fact it's that, it'll be the custom scroll view I believe is where the actual. Oh. Okay. So we. So. You remove, the scaffold, so yeah so we we, don't need well we can still, have a scaffold, cuz if you have like a floating action button or a drawer yes right it's right so, but instead of a ListView, you'll use a custom scroll, view mm-hmm, you. Can also find this if you look at the ListView documentation, though there's an example there for how to go from ListView, to, custom, scroll view a ListView, is really, just a, wrapping. Around custom, scroll view that forces. You to use us through the list but. Custom scroll view is the real workhorse. For, for, few ports right in sewers so yeah slivers, yeah. Get. Into the, custom. Scroll. View so okay. Let's. Go through this so, customs the scroll view takes many children, normally. We use the name children, when. We have many children because because, this is a sliver. Parent. We use the word slytherins, instead of children that way you know that the children are gonna be slivers, and they're not gonna be rendered boxes and, I, believe, we have successfully named. All of us live the widgets with the word sliver at the start so. You. Can start typing sliver in your drop-down, will tell you all the ones that we can use right wow. That's a lot um good. So, we, can use. The red bar that yep okay. And. So, and, so if a bar I works exactly the same as a bar items, of its arguments. And so on so. That would be. And the reason we're putting this in the custom, scroll view instead of the scaffold, is it. Needs to scroll right. And so it needs to be inside, the, view if, it was inside the, scaffold. Scaffold isn't, scrolling and so right eiffel would have no idea what was going on there right good. So we already have this which, I like there you know oh it. Also even it. Removes, the. That's. Nice okay, so and. Now would, I do if I want to have my list here so, that's where you use a sliver, list so again this is a list of sliver so you can put as many things in here as you want one of them this little list and sliver, list has basically, the same arguments. As list view because list view is literally just a wrapper around custom, scroll view plus sliver list right, so you can just pass in your children that you were passing before unless you just like, it just needs to delegate so you.
Want You want one of the different constructors, instead of the list we, have no I. Have. A new macbook so i can't write, that's literally spot, sliver, list. Forget. With the I think, maybe you. Know we probably have to provide that see this is why I'll get to the document if, you go to the list read documentation again you'll find there. Is a step-by-step. Instructions. For how to do this right this is you know this is interactive so we need to do this the. Hard way, sliver. Always, Delic, I, think, so. So there are two right one of them is a builder like ListView. Builder and the the, this, one is list, where, we actually have the list is right and here. We have children, which. Are, just still from here. So. As a general rule I, would always encourage people to use the Builder, variant, rather than the, list. Variant guides the list variant but both of them are lazy in that they both don't. Render the render, they don't instantiate the render boxes, in. Advance. But. The list version does instantiate. The widgets, because you create. The whole list of the widgets right when. You have so in this case for example you have your all names yeah lists. You. Can actually use, the Builder. Delegates. To just build just the widgets that it needs of that particular item they always do that so. Builder. To look at and of, course. We. Need the Builder, all right actually, so let's, probably be context. Index. Okay, we need to go, to Luke's, bus. Yeah, indexed. Widget builder which is it, gets contacts, and index soup and. I'm. Just gonna. Jesse. You can just call your build, tile, right. Or the specific name that is that index in its list. So. All names. Index. And, then but. I need to tell, it to. You. To, not do, things. That are out of bounds right so you can give it the, specific. Number of children that's one of the other arguments builder, delegate you. Actually don't necessarily, need to give that number in this case it's the right thing to do but in general you don't need to give that number if your, builder, returns null we'll assume that's the last child, the, reason, to give the count is that'll. Allow you to use the scroll, bars it'll, be, able to predict the length, of the list veterans before right. Okay. Cool and yes. So. That's great now let's, play around with this little red bar just for a bit so it has different. Options has, lots of options up where you can set pinned that will, make it stay, at the top of the list always. Kind. Of like there's, a shadow, oh. That. Took me days to do. But. It's it what. Else is there. Floating. Is another, effect that people like. So. That one will cover and, I know you can be pinned and floating. Oh okay. But if you remove the pinned. Then. It'll, scroll away and, then when you come back oh. It's. My. Computer just. For, some reason. Stopped. Okay I'm, sorry I need to rebuild. So, again new computer things, are, weird. Yes, sir just wavin a few I'll back it comes back yes, so we go to, here. And then nice. It. Was interesting when you have pinned and floating, it didn't complain but then it made the text disappear, which is, an interesting effect. Right. Yeah it also made, me dive at that point right. I think it just died yeah. So. To, do so there are other effects you can you can add a, what's. It called some, expense flexible, space. Yeah I think you need to set the expanded. Height as well. Okay. Flexible, spaces water because I've just said the expanded height I think that will do. The, bigger app bar that then shrinks the flexible spaces then what will appear behind, the. So. If you go the other way to shrink there we go right. And. If you put a something in the flexible. Space I put a placeholder in the flexible space. It'll. Show. You where, that's drawing so it's the X there oh so. That's that's where the. Takes. All the way that your flexible space goes so typically you put some sort of image. There right. There's. Also. We. Probably shouldn't do this in this case but there's also a way you can put a bottom, in. The a bar and you put a tab. Strip there or something whether right there's. A bunch of other features on there yeah this, is great so slippery, bar and if. You look, at the implementation. Let, me see if, you can get to a built right so. So a bar, uses, a slip-up assistant, header which is the underlying. Render. Object to do this. Except. For that actually. There's. A little bit of complications, around 1/2 bars because there's, 3 different types of that bars is the pin the floating, and the pinned floating, or, there's. A bunch of different bat bars right and each, one of those has a different render object under the hood but, we wanted to all expose, that as one widget, so, you could just set the flags on it because. Of this it. Gets a little tricky, between the widget and the, render object at the bottom. In. Most. Cases if you were to make your own, render. Sliver with your own widget to go with it you wouldn't have that level, of complexity, right, so.
This Is great so so we have something, that's using, slivers, we. Can play, around with it we can you know add things to it we can go see the code yeah one thing will be good to show is so so far we've done two slivers, this. The app bar one and the list, the. Sliver list one right both of those are slippers. On the outside, but, on the inside they take boxes right placeholders, a box text is a box all of these black piles of boxes so. There are also slivers, that take slivers on the outside and slivers on the inside, the. Main example is sliver padding so. For example you could wrap the, ListView. Or the app bar in, a sliver padding. Okay. And, that works the same or like, the sliver list yeah you could wrap the sliver list earnest little padding for example, and. It works similarly to a, padding, widget in the Box world. Again. Because this is a sliver we call this a sliver, instead of a child just to remind you that it takes a sliver as a train and then padding and then you set the padding and that works the same as a regular padding so just an edge inserts and then, when. You reload you'll find that your, list is indented. Oh nice. And. The. Tricky thing is you can do the same to the app bar. Okay. Let's do that. It's. Not clearly what's gonna happen when you do that. Because. That bars do not expect to be better. Flavor. Padding, let's break this so, sliver and. Then. Last year 24. Ooh. There. Is. Now. The padding, doesn't want, it, to be floating so we still trying to make a sliver a part the padding doesn't know how to be super. Padding doesn't know how to float right and so it it's probably Justin. Remember, how I said that we're passing constraints, down and in geometry back up the, constraints get passed through the padding the padding then passes our constraints to the hat bar the a bar is returning constraints, a geometry, that imply that it should float the, padding's like to. Do that and so it like re wraps the the geometry into a different set of geometry that indents and everything and then passes that up and. That's why here the the, a bar is not floating right, now yeah. That's. What. Happens when I put, something above, the sliver, AB bar. Right, put, put a sliver, list where you can put a sliver. Sliver. To box adapter that's the simplest sliver is a sliver to box adapter, it. Is basically, just a container, that needs sliver on the outside and a box, on the inside. So. Let's, do this, sliver. What sliver, to box adapter. And then you can put whatever charge, you want in there this is a expensive, Oh, so. You can put a flutter logo or a text or whatever. Yeah. Hello sue. I wonder, what sighs I don't be oh. And. Then there it is, now. Okay. And now it's actually. Oh. Yeah it is trying. To. You. Know the ED bar is actually trying to float over, things yeah, the f bar is getting really confused cuz the floating high bar doesn't expect then you want to be able but if you remove the floating, you'll. See the right. Doing. Floating. At bars do not like to yeah, of course not I just wanted to think then I didn't so okay good. Thing. You can do. Which. Is particularly fancy so if you put copy your entire list above your app bar you, can then I forget, how this works but you can set a Center, to, your custom. Scroll view and then. Half, of your list will be above, the, center and half of it will be below the center so right now you just have a list followed by a bar followed by the list right but if we look at a custom, scroll views documentation, there's a way to set like the center. Again. How this works. Maybe. We never expose, this on the widget maybe this is only exposed in the render okay. Nevermind, false false alarm but. The, underlying logic knows how to have double. Ended lists that are infinite in both directions and have, a Center in the middle, right. Like the app bar for example but. Apparently we never expose that. Feature. For next year. Okay. So. Alright. I think we recovered, a sliver, at bar and like, the, crazy things that you can do with slivers let's, create our own slip hmm, yes. Where's. The where. Do. You want like, like. For example here, do you think between. These two. Between. The app bar and the list can we put like a weird, sliver yeah not whatever we want any way we want but I duty of this composition approach right you can. I. Just mean like in terms of like showing stuff yeah yeah, yeah okay, so what. I do sliver so, we, have to create our own render object first if you want to create your own on a sliver so. We need to create a new render, object class. What's. It gonna be called sliver, Philip. And. It's gonna extend, a sliver. Sorry. Can I take render sliver. Now. I have to admit at this point I. Very. Quickly should, just be called render scenario you might need to. At. This point I rapidly.
Forget. How any of this works and every time I make my own render, object I was looking up. We. Can read documentation, it's so the. First thing to do be to look at the render, sliver Docs, and those, are pretty extensive, and, they were. Written specifically, so, that I would remember how to write more render slivers later. So. The, first part of this talks. About how. Things. How the protocol works and, we sell these entire area yes. And, then there's a subject subsection is specifically, about writing, a render sliver supply, so there's several kinds of slivers you can do we've. Talked about them so far there's. There. Are sliver. Two slivers right, so you have a sliver on the ass I just lit on the inside like sort of a padding there, sliver, to box where, you have a sliver on the outside that box like and, it that's litter box adapter for example or the app bar there's. Sliver, too many slivers, like. Sliver little sliver grid. And. I suppose in principle, you could do something. There isn't a sliver on the outside and there's a sliver on this inside that's basically, what a viewport is all. Right custom scroll view under the hood uses a viewport. To actually do all the sliver logic and it has to adapt for a box because on the outside we're using boxes to, slivers on the inside and that's what the viewport is so. The. Easiest want to do is a slimmer, to box. Sliver. Is. It is it something. That they can all render, sliver to box yeah we could just copy and paste render this new bottle after and then just that one if you want, yeah. That's what I would need, okay. Let's. Do this. What. Is it you. Want to render sliver, to box. Adapter. Okay. And. I just did this so, yes so it's, a performance' out is how, basically, all render objects, have. A layout method and then they have a paint method and, in the case of slippers there's a few other methods you have to implement but. We'll, talk about those later right so, first we have this. Sorry. I just under yeah. Yes and in this case you want it to take a single, box. Child so you'll want to also create a, you. Look we all want to change the. Declaration, so it's mixing. In one. Of the. One. Of the other classes if you look at what the other one is you'll notice it's mixing and render sliver single box adapter and. That is a, nice. Mix in it's. Actually extending, it over suggesting, it ya know even better. So. That's a render. Object that knows, how to deal with having a single child right, those things like adding and removing a child so mostly. You would want that or like, it well I know ok so just want that and it, really depends on the effect you're trying to get right right it's hard to predict what effect, and. Then I just cook a face that's my favorite. Way. To implement. Anything so. If. I can. So. This K so this plus actually doesn't. Have a paint method because the superclass. Automatically. Paints the child at zero zero which. Is the easiest, way to do. To. Do the this liver work.
So, Do we care. Let's okay. Yeah perfect, also, if you use this one now you'll find so far we just have to make a widget to wrap the. Base. Call this render sliver Philip because this is our render object and then, we'll create a. Will. Create a separate, class called sliver Philip which is our. State, lines, nope, it's actually a render, object the giraffe alright. So, we can get a sliver, Philip extends. I believe, I'll extend a single, child. Nope, none of those. Let's. Look it up again look, at the children of render. Object widget, the. Subclasses, of render object widget if you don't look up and dropped a widget in the dots you'll find it'll list all the subclasses. So. Up here where it says implementers, you'll see all the different parameters right and the, one that we care about is, single, child render object widget. Okay. So. This is what yeah this again much like your the, other superclass, we're using knows. How to handle just having a child it doesn't really care exactly how you deal with it it just knows that. Yeah. Right, and. Then, this has to return a render, slip of Philip in the. Constructor. And. Then. You don't have any arguments except the child and we the child is dealt with by the single, child render object widget so we'd have to worry about that we do have to add a constructor, to take. Our child. No. Okay. And. We, normally will also take a key, so normally we'll have two named arguments a. Key. Of type key and a, child, of type widget. Okay. So we, did. And. I think both of those can be passed to the superclass although again this, is where I. Yeah. Excellent. Is. It yes, okay, and then. Normally. We would also have a update, render object but. We don't have anything to update because we don't have any arguments right now so there's nothing to do, there okay. So now if we try adding that to our list and theory, it should do the same as we, did before with the renderer. With. The limiter box adapter. So. We. T. And. You know we can add it and give it a child of. Next. High. Or. Something yep, let's try as we'll probably fail, because writing. Code never passes, the first time yeah and also I. Don't, know what's going on with my. Computer. But it's just, froze. Again so, sorry, about that. This. Happens to you please father book yeah I, will. But. Uh now oh. Right. Okay. This, great. So. Um. So. Crazy, things that we can do with this so, let's let's put something, bigger in there to make it bigger right like we can add a container or something with some big height and, then making it big will make it much more obvious that we're doing crazy stuff when we start doing crazy stuff right so, let's, do. Some. Colors. Like. Red. Horse. And then. In. It there, should be what. Text. And. Then probably also give it a height. Right. And. Height. Of 50, sure, how. Big that okay let's make it 150. And I'll give a small space to play with all right so now if we look at the if. We look at the render object now you'll. Notice somewhere, we're returning a geometry so. When we don't have a child right. We return zero and silver, geometries of 0 is a. Constant. Instance. Of sliver geometry to just hide all the lumps at a zero because there's, nothing sure. So. Like if okay. So if I do this. Yep. This will always just, not exist, yeah I mean like one okay and as you see doesn't show anything yes. But. We have a child so we don't want to do that the, next thing we do is we layout the child now the, sliver constraints, object has an AZ box, constraints. Getter method. You can see there and we use that to very quickly turn. The. Sliver. Constraints, into the sort. Of equivalent box. Constraints, it's, usually the box constraints, you want in this kind of single child case. And. What it does is it looks at what, the cross extent, is the cross access extend and that just okay that's gonna be the width and, it figures out how much room you have which typically will be infinite in the high direction I'll make that the max extent. In. The height but. It knows about the access direction, it knows about the growth direction it knows all about all the different things and so it picks the right one so if you actually had a horizontal, list it, would use the height as the cross acciden. It's. A it's a relatively simple method, but it is so convenient here. So, the next we have to figure out what we want to do so we. Don't have the equivalent for going the other way to find out what, the child extent, that's the the, height.
Of The child if you're, a vertical, list or the width of a child if you were horizontal list and so, we have this switch here that does that for us it, figures out the child extinct based on which axis the, list is in it so in our case it's, gonna be the height height, yep, but you could easily switch your custom, scroll, view to be a horizontal. Custom, scroll view I wish try that what happens if you make that if you do that. Did. You do like. Yeah I had an access, argument here that says. Access. Direction, is something along those lines it's, relaxed transaction, yes. It takes an axis direction and I think there's like four, different no, takes an axis again they go right, yeah, this is cool we, can have like a bar, on the left but, notice how now, our container. Is. Is. Correct, is it correct yes like it's all worked and that's because of that switch statement where we're looking at the width of the height right, the the sliver, the the code, here that we are setting the hypes 250, that's being ignored because the height is forced the regular height of the of. The viewport. And. We didn't set a width so we just shrink, so. So, that's what that switch Sammy is doing after that we're then trying to figure out okay what is the. The. Size. Of the child essentially. In. Terms of. The. Sliver geometry, so. This is where you start calling these convenience, methods. Where. Are they is that, the. Sliver okay, yeah the sliver I think it might be an on the render slip a helper class there's, a class that has a bunch of these methods, that help you do, these computations but you don't have to use these so we can like delete those entirely, and, we'll. See what happens when we put in our own numbers. And. We can remove the asserts as well because I'm right, try. And explain why each of these things has to be true necessary right now, so. Then here's the geometry, and we can. Place. Into. These numbers whatever we want so, the first one that really matters is the paint, extent I believe that's the only one you actually have to get we should have a look at the sliver geometry constructor and, see which. One's it, really, wants you to give. In. Fact it has defaults for pretty much everything so you're you, know really have to yeah. A. Lot, of them defaults, to paint extent like layout extent I believe will automatically, use the paint extent if you gave it layout. Extent, is how far down, the. Next. Child will be paint. Extent is how much you're going to paint is also hit test extent, hit, test extent, which is how, big you are for taps so. You can make yourself bigger than you're gonna paint. So. That you'll tap in an area where you're not painting so hopefully forth. What's. Gash extent, so, cash extent, so. The. Lists will render. We. Go to the whiteboard yeah so. The lists will. Render. What's. On the screen. Right. I mentioned, earlier that they're lazy so we have you. Know this is what's on the screen and we, have a bunch of items on the screen, but. The user Scrolls and, sometimes like say these things have an image right like an avatar, or something, if. The user Scrolls we're, gonna very, quickly need to have this image and this image ready and so, instead what we do, instead. Of just. Rendering. It just at the last minute is we actually have a few pixels, I forget. How many like 200, or something like that we. Have 200 pixels or something like that of content below, the list and also above the list but, we have pre-rendered.
And We're ready to go, we, also use this for accessibility. So on iOS in particular if, this. Is selected with the accessibility tools and you say go to the next one right we need to know where it is right on, Android, the API you can just say oh I don't have it yet come, tell me and scroll. Then I'll tell you what it is and on iOS you need to have it already and so, when we scroll to the next one we, have it already because we we, computed, where it would be and, that's what the cache is and so. In. The. API here, you'll. See on the, constraints. And you'll. See on the geometry - there's mentions of the cache now. You don't actually have to implement any of this and if you just leave it off you'll find it defaults to reasonable, values right in. Our case it really doesn't matter because we have a single child we're always gonna lay it out, otherwise. What would we do and. So we can just ignore all of the cache like why, don't you like, put, there is it like something's bigger, than like. A bigger. Number or yeah. So the cache extent, tells the sister how much have you cashed so for example say. They, write your list is actually like this short right, so. You've reached, the end of your list your, list goes up to here but then you reach the end of your list, there's, nothing else to precache because you don't have any more contrite and so, your cash axon wouldn't extend past, whereas. If you do have content, you, have a bunch of content you can say oh I've cashed everything, up to here right and. That's what the captions name is about. If. I remember correctly right, so. We I so, it, looks like we don't need this. We. Might not need this because it's a child, that they're just paint extent I think is the one that we do need to give. Okay. Because. Otherwise it'll be zero and if I paint extent is zero then, we're, not showing anything so, I can just do like okay. Seventy-five. Yeah. And. Then, this one hit, test extent we can get rid of that one. Max. Paint extent, is how, much what. Is the maximum, we could ever paint, right. Okay. And then. And I believe that also defaults, with paints do, what. See I, just. Want to, don't. Move. Oh yeah, the ones that default a layered extent hit exits and encash extent. So. You do need to give a max, pain extent mm-hm. And then. This is has visual overflow, yeah that one you don't have to worry about that that's about making certain. Optimizations work, later oh. Wait. Did. Happen. What. If I do 15, oh. So. Here you can see one of the first weird. Effects over getting so notice how when we got to the top of the screen it didn't go off straightaway yeah, oh. The. Next listing goes everywhere right that's because the, paint, extent is being fixed here so we're always painting 50 regardless. Of where we are also it it covers the oh, because. So. We're always taking, as much, we're, always scrolling. As much as the, the child. Right. So we're, always taking up as much of the scroll, if you like has the child, we're. Always painting, 50 uh-huh. So. Okay. So we, could do like this and then. See. Okay, so so, we'll what. Can we do like can we for example. Something. That really makes it clear. That this, is done. On basically, every frame. For. Us and we, can do whatever. Can. We like, like. You. Know if the, if. The, scroll offset, which we get right if, the scroll offset, is even. Then. We yeah. Yeah. So, we, look up the, you're. Given the constraints. As. Input, here the radio constraints, or axis so you can use anything on the constraints object to, determine what the, geometry movie. So. Constraints. And. Then you'll see we have a number, of features so scroll offset, is one of them scroll, offset is the distance, from, the top. Of your, sliver. Not, the viewport the top of your sliver, to. The. Top. Of the first thing on the screen that is visible so. Right now it's. A zero right, because, the, text, is the first thing on the on the right, inside. The widget that's visible and it also happens to be at the top of your widget but if you scroll your widget halfway up off the, screen. Then. The scroll offset will be the distance from where it where the box would be scrolled, off to. The top of the screen. How. That so that's, like that's, now. That could be changer so now it's changing all right. Do. I ever know. Like. Where. I am right now um in, the, you, know.
I. Just, want I just want to make, changes, even now I see so, we actually just. Like yesterday added, this feature I don't know if the version you have no. That's. If, it's not there yet that's fine I was just literally, just added this feature right it, may not have landed yet but. Yes we're looking at adding that it's. Useful for things like on iOS. There's. Some weird. Films, the officials, victim we were trying to do I forget, what it was we needed it for but, yeah we decided this feature. All. Right so so I think I can just do. So. What. Doubles, do I need to can, I so scroll oh that is a good one place things on and. Then, I can do oh. Yeah. -. Yes. This. Will be weird, it'll be very weird and and. Then what can we do. So. You could for example. Change. How, much has scrolled, based on whether it's odd. So. Like. Yeah. So if it's. Odd. Than. 50, and otherwise hundred, that's, gonna be very strange but it's trite I'm. Not right. Now, the next. Trial is jumping so the reason the next child is jumping is when, you're at an odds scroll, off set your, next child is 50 pixels, further. Down but. You. Still have you've, consumed, 100 pixels, basic value of the scroll offset, and. So, the next child has already scrolled 50 more pixels right, whereas, when you're. Even. The. You've. Consumed, 100 pixels with a scroll set even, though you're only paying 50 pixels so, what it would have what, happens here if I say max paynt, extend. Again. We're. Back, did. I haven't seen before so I don't know what's what's gonna. For. You this, this, should just, not. Change the scroll extent but to change the actual, I imagine, not sure what this will do. Nothing. Yeah. So, if we look at the documentation for sliver geometry, we can look at see exactly what. Action. Our dogs, look it's exactly what max. Paynt extent does, so. A lot of the things on sliver, geometry, sliver geometry a lot of things on sliver geometry are. Used. For very specific cases and so often, you you won't see a direct, effect but if we look at the max paynt extent, and. Then look at the full, documentation. The. Estimated, total pain extent. Yes. So this is actually only used for shrink wrapping that's right so there there is a custom, scroll view has a flag that you can set on it that will shrink wrap, shrink. Wrap shrink wrap means it. Will only be as high as its. Content this, is very expensive, because. It means that you have to measure everything in, the scroll view, so. It couldn't and you can only do it, in. The scroll, access direction so for vertically. Scrolling one that means in the height and, the reason for that is we, know to stop, once we reach the, height of the, of, the parent, right so we, don't need to actually measure, everything if we were to do shrink-wrapping, in the cross axis we. Would literally have to measure everything. In the list to figure out what the widest, thing was right and that would be a really. Expensive right. In. Fact it might be impossible because, the list can be infinite yes so you might have to measure infinite, mass enough to figure it out, so, this one not interesting, in our case the. Ones that are interesting are often layout extent, and. Paint. Extent, paint. Origin, is also a fun one. So. Try. Try. Changing the paint. Origin and all the paint extent paint origin will decide where, the child is gonna start, painting. Okay. So a relative, to where it would, start, painting so, you can remove the maximum extent entirely I think you just defaults to the paint next. So. Paint origin you, know straight and that's like. You, could do something really crazy passing, just the constraints, don't scroll off set as the paint origin. Okay. It's, just so-now, it's always gonna stay at the top right. Because, as, you scroll it further off the screen it's getting pushed down more and more right, that's, essentially how floating, at Bart's work I sort of pimp in dive bars no flirting members can. I do. It. Out. So. Get really weird effects with that. Yeah. Because now it's going twice as fast uh-huh now try doing like times two. Instead. Of negative oh. Yeah. That's gonna be interesting. I have, no idea what's gonna. Okay, so. We have x - now yep. I want. It okay. Yeah I think that this is past. Them enough for me. And. So as you fiddle with these different. Arguments. On sliver geometry particularly if you make them. Relative. To some of the values on scroll offset you know multiplying, them adding them stuff like that you can get some very odd effects this, was a particularly fun when I was trying to implement, app bar and, I would I you, know I was just coming up with these things so I didn't know exactly how they work or anything and I would like put them in I still don't really know exactly how they work I would, I would put him in I think I've got the right math and I put in the math and I would scroll and then like the.
Thing Would go up the app bar would go down and. About shrinking like, what is happening, so. You can definitely add some very strange effects, all. Right I think, I think that's where we end unless, you have any other crazy, examples. I. Like. That so. We've covered, today, what. If the car today is many. Widgets. That you use like, grid view ListView. At. Bars or, somehow. Use slivers. Inside, them um, you. Don't need to understand. Slivers, to use them but, then if you want to do something crazy, you, can and to, do that, you. Would typically. Extend. The. Somehow. This, render sliver. Either. This. Thing or something else my. Recommendation, would be literally, just go to the render sliver dogs and. Their innocent dogs will walk you through how to build these what. Parts are important, and then, as you want to figure out like what are the various constraints and geometry attributes. Are go, to the render. Go. To the sliver constraints, and sliver geometry dogs and look at those like you for each one we've attempted to describe what. They actually do. If. They're and either don't make any sense please follow but I'll try and prove it all. Right well, thanks, for watching if you have any questions, use. Comments. Under the video or I. Think we have a hashtag boring show, and. Yeah. See you next time.
2018-12-21