WEBVTT 00:00.860 --> 00:09.260 The second step is to create the lazycolumn that contains a sticky header for each category and for 00:09.260 --> 00:15.170 each key in the map and cards for each item in the list. 00:15.200 --> 00:20.420 Lazycolumn grouped items dot for each. 00:20.420 --> 00:29.150 Here, grouped items dot for each will iterate over each entry in the map. 00:29.150 --> 00:34.820 You can see the key would be a string and the value would be a list of strings. 00:34.820 --> 00:39.020 I'll continue with a header and items. 00:39.020 --> 00:40.970 Header is the key. 00:40.970 --> 00:46.310 For example, fruits and vegetables and items is the value. 00:46.310 --> 00:53.210 For example, list of fruits or a list of vegetables inside the foreach loop. 00:53.210 --> 01:01.610 We print the header, start with sticky header, and here we're going to call another composable function 01:01.610 --> 01:03.830 that define the sticky header. 01:03.860 --> 01:12.890 Also we're going to define items which would be the items that we passed as arguments in this lambda 01:12.890 --> 01:13.670 expression. 01:13.670 --> 01:19.510 Let's create this sticky header outside this composable Function. 01:19.510 --> 01:22.720 Let's create another composable function. 01:22.810 --> 01:25.960 Name it as my custom header. 01:25.990 --> 01:31.750 This function takes into the parameter a title of type string. 01:31.780 --> 01:34.000 Then we need to customize it. 01:34.030 --> 01:37.330 Create a new text composable. 01:37.330 --> 01:39.520 That text would be title. 01:39.550 --> 01:48.700 The font size would be 32 SP and the modifier modifier dot fill. 01:48.730 --> 01:55.870 Maximum width and set the background for this header to red. 01:55.900 --> 02:00.010 Also set some padding eight dpi. 02:00.190 --> 02:02.980 This is my custom header. 02:03.010 --> 02:06.220 Let's go up and the sticky header. 02:06.250 --> 02:11.200 Call my custom header and pass the header as a value. 02:11.200 --> 02:15.970 So here I'm passing the header and the items are passed down. 02:16.000 --> 02:17.260 The sticky header. 02:17.260 --> 02:21.610 As we said in the previous videos, is an experimental. 02:21.610 --> 02:30.550 So we need to add this annotation opt in experimental foundation API, which means that it may or may 02:30.550 --> 02:35.290 not be removed in the next updates of Jetpack Compose.