WEBVTT

00:01.130 --> 00:08.990
The third step is to create the items and customize the layout for each item that would be displayed

00:08.990 --> 00:11.270
under each sticky header.

00:11.810 --> 00:15.800
For that, we're going to use items.

00:15.800 --> 00:19.430
And here you can see there is an error.

00:19.460 --> 00:22.220
Type mismatch required and found.

00:22.220 --> 00:23.540
List of string.

00:23.540 --> 00:24.860
It's very simple.

00:24.860 --> 00:29.180
You can use items and list of t.

00:29.600 --> 00:34.460
It's about using the correct import of items function.

00:34.460 --> 00:39.590
Then we need to create a custom composable function.

00:39.590 --> 00:44.060
For that I'm going to create another composable function here.

00:44.390 --> 00:47.360
Let's start creating a card.

00:47.360 --> 00:51.470
And inside this card I'll create a text.

00:51.470 --> 00:55.220
And this function takes into the parameter.

00:55.220 --> 01:04.490
The title item title is of type string and set the text parameter for this text.

01:04.490 --> 01:07.500
Composable as item Title.

01:07.980 --> 01:09.600
Modifier.

01:09.990 --> 01:13.560
Modifier dot padding ATP.

01:13.590 --> 01:18.690
Also, we're going to use font size 24.

01:18.870 --> 01:23.460
SP okay, this is the custom item layout.

01:23.490 --> 01:24.540
Let's go up.

01:24.540 --> 01:28.020
And here let's continue what we've started.

01:28.050 --> 01:28.980
Item.

01:28.980 --> 01:38.070
This is the argument of this lambda expression and my custom item I need to pass the item.

01:38.100 --> 01:43.050
Okay so for the headers we created a custom header composable.

01:43.050 --> 01:48.030
And for each item we created a custom item composable.

01:48.060 --> 01:54.870
Let's call our function in the Setcontent here and run the application.

01:54.870 --> 01:56.100
And here we go.

01:56.130 --> 01:57.510
This is our application.

01:57.510 --> 02:06.420
In order to clarify the sticky functionality for each of these headers, I'm going to increase the size

02:06.420 --> 02:08.130
of this text.

02:08.130 --> 02:12.750
So increase the size from 24 to 32.

02:12.780 --> 02:17.460
Also, I'm going to create some paddings for this card.

02:17.460 --> 02:25.260
So modifier modifier dot padding 16 dpi from all sides.

02:25.290 --> 02:27.990
Run the application again and here we go.

02:27.990 --> 02:29.190
It's better now.

02:29.220 --> 02:30.750
Let's scroll up.

02:30.750 --> 02:33.450
You can see fruits is a sticky header.

02:33.450 --> 02:37.770
We need to replace the vegetables with the fruits.

02:37.770 --> 02:41.220
So for that I'm going to increase the padding.

02:41.220 --> 02:44.010
For example 32 is good.

02:44.010 --> 02:45.390
Let's run again.

02:46.080 --> 02:47.220
And here we go.

02:47.250 --> 02:49.560
Fruits vegetables.

02:49.560 --> 02:55.590
You can see we have this sticky header I'll add another vegetable.

02:55.590 --> 03:02.040
So let's go up I'll add broccoli and P run again.

03:02.040 --> 03:03.300
These are the fruits.

03:03.300 --> 03:05.730
You can see the sticky header.

03:05.730 --> 03:10.770
You can notice that vegetables header is replacing the fruits.

03:10.800 --> 03:11.670
Here we go.

03:11.670 --> 03:14.700
And congratulations guys.

03:14.700 --> 03:16.650
This is our application.