How to use mutableStateListOf in compose

Question

Items get displayed as duplicates when I use remember with mutableStateListOf . so whats the right way of creating a mutable list that can hold a list of data classes in a composable.

sample code:

@Composable
fun WallpapersDetailScreen{
   val items  =   remember {
        mutableStateListOf<MultiFabItem>() 
    } 

 items.addAll( listOf(
     MultiFabItem(
         identifier = FabIdentifier.FAVOURITE.name,
         icon = ImageBitmap.imageResource(id = R.drawable.heart),
         label = "favourite"
     ),

     MultiFabItem(
         identifier = FabIdentifier.SET_AS_WALLPAPER.name,
         icon = ImageBitmap.imageResource(id = R.drawable.wallpaper),
           label = "Set As Wallpaper"
         )
   )
    }
     

Answer 1

You are adding item on each recomposition with

items.addAll( listOf(
     MultiFabItem(
         identifier = FabIdentifier.FAVOURITE.name,
         icon = ImageBitmap.imageResource(id = R.drawable.heart),
         label = "favourite"
     ),

     MultiFabItem(
         identifier = FabIdentifier.SET_AS_WALLPAPER.name,
         icon = ImageBitmap.imageResource(id = R.drawable.wallpaper),
           label = "Set As Wallpaper"
         )
   )

You can add your items inside remember only on composition

   val items = remember {
        mutableStateListOf<MultiFabItem>().apply{
            addAll( listOf(
         MultiFabItem(
             identifier = FabIdentifier.FAVOURITE.name,
             icon = ImageBitmap.imageResource(id = R.drawable.heart),
             label = "favourite"
         ),
    
         MultiFabItem(
             identifier = FabIdentifier.SET_AS_WALLPAPER.name,
             icon = ImageBitmap.imageResource(id = R.drawable.wallpaper),
               label = "Set As Wallpaper"
             )
       )
        } 
    }