jetpack compose lazy column - dynamic list with state management.

hello guys welcome back in this video we will learn about lazy columbia compose which is similar to recycler view we'll create a cat adoption app that has a functionality to add and remove data using state and view model so for example here we can scroll data down and also we can remove data by just clicking this cut here and also we can add new cards by clicking this floating action button here so without further ado let's get started so before we start in this project i have added starting data like the images of cards in the data class which the project is available for download a link in the description below so as you can see here in this folder we have here a data class and we have created here a data class of cards and we have created these cards also if you come here to this race and here to drawable you can find these images of cards so you can just go and download it on github and we can we are good to go okay now let's collapse this and we are going to create here a new file and we are going to call this home now let's start by creating a home composable which is going to be our screen for the entire ui so let's create here a new composable and we're going to call this home and inside here this home we are going to use a scaffold so we are going to use this scaffold and this scaffold has the inner padding so we are going to use this inner padding inside our lazy column so this lazy column also contains the content adding and then we are going to pass that the default padding which is provided by this lambda function and then inside here we are going to call all of our items all our composable but it's different from the column one and inside here the let's create a list item so that we can just display here a list which is in in a horizontal format as you have seen so in order to do that we are going to create another composable and we are going to call this cut list item and inside here this cut list item we're going to use a row and there are two ways which you can use and there is another way which is the using the experimental apis but it's just really simple so i'm going to show you later in this video right now let's create this manually so we are going to use a row inside here and inside this row we are going to use the horizontal arrangement and now inside here we are going to create the image and this image is going just to display that the image of the cat and we have to pass here they cut so we can just pass in here i got we have to use a printer resource id here and we have to put the cut we pass in here the cat image and we're going to pass in here now so right now we have created here our image and we can try and create here the text and these texts are arranged in a vertical format so we're going to use a column here and inside this column we are going to create here a text and this first text is going to use the name and we can pass in here a typography and we're going to use the header 6 so we can duplicate this and here we can use the gender and we are going to use body 2. also we can change here color so we're going to decrease here the opacity of this color and we can change it to 0.5 so now let's try and preview here our function so let's create here a preview function and we are going to call this and we are going to call that cut list and inside here we have to pass in the cat so we're going to use here a remember function in order to get there we're going to generate a random cut and we are going to pass in here that cut now let's try and preview here function and see so here is our ui which you have created this list item so we are going to use this and we have to create a header so that we can display it here in this lazy column so let's do this right now here so let's collapse this one here and then we are going to create here room so that we can see this properly so we are going to create here another composable and this composable we are going to call its header inside here this is going to take here two parameters so we are going to get the text which we are going to display and then we pass in a default modifier so inside here we are going to use a surface and inside this surface we are going to pass in here color then we are going to use the material theme then we pass in here the content color also we're going to use the material theme then we're going to use the primary color also we have to provide here the modifier now we are going to pass in here a text and this text is going to take up that text then we have to style this to use the typography we use the subtitle too now we want to fill up the hole we have to pass in here the modifier so we have created here our header so we are going to use this header inside the we're going to use this inside the lazy column so let's just do it right now so now let's fill up here a lazy column and this is different from the column composable which accepted directly taking up the the composables so inside here we have to use a function and this function is called item and here we are going to add a single item so we are going to use the header composer which we have created and we are going to pass in here the text we are going to pass in here cards so this header here we are adding here a single item so we can add here the multiple items so first and foremost we have to create here a state of this which is going to hold up the the list of these cards and if you don't know states i'm going to bring up here card so you can watch the the state the state video which is going to help you so let's use here the and we are going to call this cart and we're going to use the remember keyword function here in order to bring up the requests so we're going to use the repository here the cards repository the effects cuts repository which we have created in the data class so we are going to get cards here and inside here now we have to use the items then these items here we are going to pass in the cuts and inside this lambda function you have to import this because sometimes it is not imported and then inside these items here we can pass in that cut so we're going to rename this reference here then we can pass in the cat items list and we're going to pass in here the card so now let's create here preview function for the home so now let's rebuild here project and see what's going to happen so as you can see here now we have created the ui and this one is our ui which is looking pretty good right now but we have to make these images rounded so we are going to jump inside here and we can fix this by adding here a modifier so we are going to pass in here modifier and then we are going to clip this to be a rounded form so so inside here we are going to use the material theme we're going to use the material theme shapes then we are going to clip this to a small to smaller rounded corners so right now if we try and rebuild and see here so now we have given that polish which we have gained these rounded corners here now let's try and run this on a real device and see so if you launch up the app will be empty as you can see here and this is because we have not created this on the main activity so it's going just to display blank activity so let's jump inside here and fix this by calling here the home composable so right now here we can try and rebuild and we can see just right now so now the app is launched and as you can see here we have the data and you can scroll here down and up so right now if you click there is nothing which is happening and this is because we have not added the state so that it can react to it so when we are clicking and we can do this by using the view mode so we are going to jump inside here and create a event that is going to help us to remove and add items now let's create here a viewmodel so that we can place those events and the state so we are going to create here a new a new file and this file we are going to call this and it's going to extend here view model now here we can create so we can create here a mutable state and inside here we are going to create here i'm going to use the cuts repo and then we're going to get here cards so inside here we can create now the add functionality so we are going to create here the events now we can take this card and we can use here delicate method so that we don't have to create here by every time we called dot values so inside here we're going to call this cut then we are going to use the cuts and then we are going to add the list of cards so inside here we are just adding up this cut and this one so we are adding inside here and also we can create here remove function and this parameter takes in a cut then now we can take the cut then we can convert this to mutable list so we are going to remove the cut so right now here we are done with the view model so what we need just right now is just to hook up these events inside the the composables so right now here we want to click and add up a a a card and in order to do that we are going to use a floating action button so inside this is scaffold we are going to create a floating action button now we have created the floating action button now we have to pass in this event inside here so in this home here we can pass in here the the event we are going to pass in here a variable that is going to take up the cards so it's going to bring up the list of cards and also we have to create here the the click functionality so in order to add here we have to use the and we don't need anymore this so we are going to create here the cards and so inside this one click we are going to pass in the on and here we have to generate a random card so if we are building a real world application we could pass in here the data so we are going to just use the generate random generate random cards inside here and now we are passing this card inside here also we have to pass in there on remove so now we want when this cut list is going to be clicked so that we can get the the data so inside here we are going to add another compo another function here and then we are going to we are going to make this clickable and we have to pass in here the event so we are going to add here on remove cart and we are going to call this one remove cut inside this so when this is going to be clicked we want to remove the cart so now when this item is going to be clicked we want to remove the card and inside here now we can pass in the on remove function now we can fix this errors because they are rising here and also we can fix here the error and pass in just a lambda function so right now we have to fix this in here inside the main activity and in order to fix this we have to create here a new variable and this we are going to call the cats view model so inside this home here we have to pass in the cats so we are going to use the view model cats view model and we are passing here the list of cards and also we have to pass there on remove here so right now here our app is ready to launch as you can see we have used this so let's try and launch our application and see how it's going to respond so now the app is launched let's try here and we can try here to remove data so let's scroll down side here as you can see when we click the list is going to be updated so we are creating here a dynamic list and this is similar to just the recycler view also we can add here data in this video i said that you can create a catalyst or a list item by just using a scaffold or a slot api so we are going to do this let's just jump in here home and we are going inside this here we can try and collapse this so we can use here this api and this api is just an experimental api so you can use this list item and when we add this you can see here we have an error so we can press alt enter here in order to to import that so we can add this the experiment api and inside here now we can use this so we can pass in here the modifier so we can pass in here the on remove and we can pass in the cart and also we can add the padding which is similar just to what we did here and now this is provide slots which you can pass in here now for example here we can pass in the icon and now in this icon here we can pass in our our image so let's just copy this image here and we can pass in here the image and inside here also we can pass in the text so it's going to structure here our text by not just using these columns and other things so we pass in this first text also we can pass in the secondary text so if we have a secondary text we can just use this text here and now as you can see here we go we got rid of all of those boilerplate codes which we have created and now it's just really simple using the the slots which is provided by this list item so it is similar to that of a scaffold so i think it is much more easier than implementing a recycler view from scratch so you can try and relearn this app and see if it works if you find value out of this video you may like these other videos see you there thank you bye bye

Channel: HoodLab

Views: 493

Rating: 5 out of 5

Keywords: jetpack compose, jetpack compose lazy column for indexed, jetpack compose lazy column for, jetpack compose tutorial, jetpack compose mvvm, jetpack compose ui, jetpack compose android, jetpack compose android studio, jetpack compose state management

Id: V-3sLO_TWl0

Length: 19min 29sec (1169 seconds)

Published: Fri Aug 27 2021