The document discusses composable functions for displaying a list of posts and stories in Kotlin composables. It defines data classes for posts and stories, then creates functions named InstagramStory() and InstagramFeed() that take lists of story and post objects. These functions call other composable functions like StoryDesign() and Design() to layout the stories and posts by passing in the lists and calling NewStory() and NewPost() on each item.

1. This work is licensed under the Apache 2.0 License
Welcome back

2. This work is licensed under the Apache 2.0 License
 Quick Recap
 Object creation Post and Story
 Single Post & Single Story
 List of Post and Story
 Result
 Q&A
Day 3 Agenda

3. This work is licensed under the Apache 2.0 License
Recap 😑
 Text, Image, Button
 Modifier
 Standard layout
 Lazy Layout
 OOPs

4. This work is licensed under the Apache 2.0 License
? + Answer =

5. This work is licensed under the Apache 2.0 License
Aim

6. This work is licensed under the Apache 2.0 License
data class Person(
val name : String,
var age : Int
)
Data class

7. This work is licensed under the Apache 2.0 License
val list = arrayListOf (
person1,
person2
)
List of Person

8. This work is licensed under the Apache 2.0 License
?
Post Attribute

9. This work is licensed under the Apache 2.0 License
Post Attribute
Id
authorImage
postImage
likeCount
authorName
caption

10. This work is licensed under the Apache 2.0 License
Post Data Class
Id
authorImage
postImage
likeCount
authorName
caption
data class Post(
val id : Int,
var likeCount : Int,
val postImageId : Int,
val authorImage : Int,
val authorName : String,
val description : String
)

11. This work is licensed under the Apache 2.0 License
?
Story Attribute

12. This work is licensed under the Apache 2.0 License
Story Attribute
Id
storyImage
authorName

13. This work is licensed under the Apache 2.0 License
Post Data Class
data class Story(
val id:Int,
val storyImage:Int,
val
authorName:String
)
Id
storyImage
authorName

14. This work is licensed under the Apache 2.0 License
Post analysis 1

15. This work is licensed under the Apache 2.0 License
Post analysis 1.2
?

16. This work is licensed under the Apache 2.0 License
Post analysis 1.2
Row
{
Image()
Text()
Image()
}

17. This work is licensed under the Apache 2.0 License
Post analysis 1.3
?

18. This work is licensed under the Apache 2.0 License
Post analysis 1.3
Column
{
Row{
Image()
Text()
Image()
}
Image()
}

19. This work is licensed under the Apache 2.0 License
Post analysis 1.4
?

20. This work is licensed under the Apache 2.0 License
Post analysis 1.4
Row{
Image()
Image()
Image()
Image()
}

21. This work is licensed under the Apache 2.0 License
Post analysis 1.4
Column{
Row{
Image()
Text()
Image()
}
Image()
Row{
Image()
Image()
Image()
Image()
}
}

22. This work is licensed under the Apache 2.0 License
Story analysis 2.0
?

23. This work is licensed under the Apache 2.0 License
Post analysis 1.4
Column{
Image()
Text()
}

24. This work is licensed under the Apache 2.0 License
1) NewPost.kt
NewPost(){}
2) NewStory.kt
NewStory(){}
Lets create file and compose function for
single post and story

25. This work is licensed under the Apache 2.0 License
Lets talk about Post first fun NewPost(){
Column{
Row{
Image()
Text()
Image()
}
Image()
Row{
Image()
Image()
Image()
Image()
}
}
}

26. This work is licensed under the Apache 2.0 License
Lets talk about Post first fun NewPost (post : Post) {
Column{
Row{
Image()
Text()
Image()
}
Image()
Row{
Image()
Image()
Image()
Image()
}
}
}

27. This work is licensed under the Apache 2.0 License
Now Story
fun NewStory (story : Story)
{
Column{
Image()
Text()
}
}

28. This work is licensed under the Apache 2.0 License
Now we do have a function which create a
single story and Post
But how to do it for multiple story and post
😶😶

29. This work is licensed under the Apache 2.0 License
Lets create function to hold list of post and
create UI

30. This work is licensed under the Apache 2.0 License
InstagramStory () ----> StoryDesign(list)
@Composable
fun InstagramStory(){
val storyList = arrayListOf(
Story(1,R.drawable.user_image,"name"),
Story(1,R.drawable.user_image,"name"),
Story(1,R.drawable.user_image,"name")
)
StoryDesign(storyList = storyList)🙄🙄
}
@Composable
fun
StoryDesign(storyList:ArrayList<Story>){
LazyRow{
items(storyList){
NewStory(it)
}
}
}

31. This work is licensed under the Apache 2.0 License
What if we call InstagramStory()
?
😑😑

32. This work is licensed under the Apache 2.0 License
What if we call InstagramStory()

33. This work is licensed under the Apache 2.0 License
InstagramFeed () ----> Design(list)
@Composable
fun InstagramFeed(){
val postList = arrayListOf(
Post( 1, 223, R.drawable.post, R.drawable.post, "Rohit", "Hello"),
Post( 1, 223, R.drawable.post, R.drawable.post, "Rohit", "Hello")
)
Design(postList = postList) /* now u know it ?*/
}

34. This work is licensed under the Apache 2.0 License
InstagramFeed () ----> Design(list)
@Composable
fun Design(postList: ArrayList<Post>){
LazyColumn{
item{
InstagramStory()
}
item{
Spacer(modifier =
Modifier.width(8.dp))
}
items(postList){
NewPost(it)
}
}
}

35. This work is licensed under the Apache 2.0 License
What if we call InstagramFeed()

36. This work is licensed under the Apache 2.0 License
Result