using Target in JetpackCompose gives an error and cause crash

[R-Ashh]

Hello Dev Community, I'm having trouble using "target "in composable, I am using the latest version of coil compose, and here's the code I am using:

            val painter = rememberImagePainter(
                data = entry.imageUrl,
                builder = {
                    target { drawable ->

                        viewModel.calcDominantColor(drawable) { color ->
                            dominantColor = color
                        }
                    }
                        .crossfade(true)
                        .transformations(
//                            BlurTransformation(LocalContext.current)
                        )
                        .scale(scale = Scale.FIT)
                        .build()
                }
            )

            val painterState = painter.state

            Image(
                painter = painter,
                contentDescription = entry.pokemonName,
                modifier = Modifier
                    .size(120.dp)
                    .align(CenterHorizontally)
            )

            if (painterState is ImagePainter.State.Loading) {
                CircularProgressIndicator(
                    color = SWEPurple,
                    modifier = Modifier.scale(0.5f)
                )
            }

after building the app, i am getting this error:

java.lang.IllegalArgumentException: request.target must be null.

I have searched all over the stack overflow and over the issues and discussions here, couldn't find any solution for this I really appreciate it if anyone can tell me what is wrong with this? and if I am using it the wrong way.

[colinrtwhite]

This is intended behaviour since rememberImagePainter sets the target internally. Unfortunately there isn't a great way to get access to the underlying drawable using this is merged or 2.0. Maybe you can extract the colour from the painter instead?

[R-Ashh]

thank you so much for the fast response, also thanks for the tip, I would try to do that instead I didn't know that its possible to do that. is it even possible to do that?

[palsega]

Dear colinrtwhite. As per documentation it is "convenience function to create and set the Target" and I guess many tried to do so. Now you have noticed that rememberImagePainter sets the target internally. So what is the true from both, may be you have a good example of "non-internal" creating/setting of target without "intended behavior" with java.lang.IllegalArgumentException: request.target must be null.?
Many thanks in advance.

[metehus]

A workaround i got was to create a separate ImageRequest to get the image bitmap and then use it to both get the domiant color and pass it to the painter. I did like this:

on the view model

    private fun fetchColors(context: Context) {
        viewModelScope.launch {
            // Requesting the image using coil's ImageRequest
            val req = ImageRequest.Builder(context)
                .data(_artist.value?.imageURL)
                .allowHardware(false)
                .build()

            val result = Coil.execute(req)

            if (result is SuccessResult) {
                // Save the drawable as a state in order to use it on the composable
                _imageDrawable.value = result.drawable
                // Converting it to bitmap and using it to calculate the palette
                resolveColorsFromBitmap(result.drawable.toBitmap())
            }
        }
    }

and on the composable

    val painter = rememberImagePainter(
        imageDrawable
    )

Edit: Setting the drawable directly to the imagePainter instead of converting to bitmap. Also changed the code to make it simpler

[metehus]

The imageBitmap is served as the data input, because it can accept bitmaps or even drawables as an input, so it's just replacing the image url (in your case entry.imageUrl) with the bitmap

And the predominantColorState is a custom method i made to fetch the color palette from the bitmap. In your case, it would be the calcDominantColor(drawable)

[R-Ashh]

fun calcDominantColor(drawable: Drawable, onFinish: (Color) -> Unit) {
        val bmp = (drawable as BitmapDrawable).bitmap.copy(Bitmap.Config.ARGB_8888, true)

        Palette.from(bmp).generate{ palette ->
            palette?.dominantSwatch?.rgb?.let { colorValue ->
                onFinish(Color(colorValue))
            }
        }
    }

    fun fetchColors(url: String, context: Context, onCalculated: (Color) -> Unit) {
        viewModelScope.launch {
            // Requesting the image using coil's ImageRequest
            val req = ImageRequest.Builder(context)
                .data(url)
                .allowHardware(false)
                .build()

            val result = Coil.execute(req)

            if (result is SuccessResult) {
                // Save the drawable as a state in order to use it on the composable
                // Converting it to bitmap and using it to calculate the palette
                calcDominantColor(result.drawable) { color ->
                    onCalculated(color)
                }
            }
        }
    }

I did this inside the ViewModel and called the fetchColor function inside the Activity and it worked fine, not sure if this is the best practice or not if in the matter of best practice there's something wrong here, i would be glad to hear it. thanks for the help.

[colinrtwhite]

This should be easier in 2.0 since listener has the image result. The best way to grab the bitmap currently is to use ((rememberImagePainter(data).state.painter) as? BitmapPainter).bitmap

[colinrtwhite]

Sorry folks, the above comment doesn't work. I'm going to add the drawable to ImagePainter.state in 1.3.3 which should be out later today. See here for more info.

[R-Ashh]

thanks a lot for the update