When you’ve got been utilizing Jetpack Compose for some time, you’ll absolutely get bored with writing previews for each single configuration of your compilations and get misplaced in massive information stuffed with code nearly however not fairly the identical as producing all of those previews .
PreviewParameter to the rescue, however whenever you wish to cross compilations or themes to your previews, you may run into a well-recognized error:
@Composable invocations can solely occur from the context of a @Composable operate
How can we get round this? Going again to the outdated manner of duplicating every preview and manually altering colours and configuring belongings? Not utilizing Materials theme values or versatile place primarily based layouts?
Concern not, there’s a manner!
You might already be aware of Parameter preview, however in any other case, this is a fast recap. The preview parameter is a manner of passing an inventory of knowledge into your preview and making a separate preview for every knowledge merchandise within the checklist. It’s also possible to cross the identical knowledge into a number of previews and create variations for every preview you want.
They’re quite simple to arrange, you want a primary
PreviewParameterProvider This checklist generates an inventory of values, one for every preview profile you wish to create:
This will then be handed to the preview as a parameter:
And this may create a preview for every knowledge merchandise:
You possibly can solely cross one preview parameter per preview, so if in case you have quite a lot of config values to alter, you may have to create your personal customized viewers.
On this case, I wish to cross the textual content and shade to the textual content, so I’ve a configuration object:
Which might then be moved to
PreviewParameterProvider and use in Preview, entry every config worth by way of
The outcomes are the previews:
As you’ll be able to see within the knowledge configuration above, I’m passing in a
Coloration oppose me
TextConfig object, however what if we wish to use Materials theme as an alternative
colorSchemeworth? unlucky theme
colorScheme values are composable values, cross these right into a
PreviewParameterProvider resulted in an error:
The best way I initially discovered to get round this was to not use the preview parameters in any respect and as an alternative create the info within the preview itself as composable.
This works, however has the drawback of making just one preview, requires you to arrange a repeating factor in a column or related, and may give the unsuitable impression of how the parts exist on their very own.
A Kotlin practical interface or Single Summary Methodology (SAM) the interface permits you to conceal the truth that an object accommodates composites from
To do that, create an interface with a
@Composable annotation operate:
Then create every configuration object utilizing this interface, to make the code simpler to learn we are able to use a lamda when creating object:
These can then be moved in
And eventually, utilized in Preview by accessing
Given a set of particular person previews:
Whereas this entails a bit extra boilerplate (since every configuration object needs to be created individually), it has the next benefits:
- Configuration objects may be correctly named for higher code documentation
- Configuration objects and preview parameter lists may be arrange and saved in a separate file, making your precise UI code cleaner and simpler to know
- Configuration objects may be mixed in several configurations
PreviewParameterProvidersequence and can be utilized for a number of previews. For instance, for a part, you may wish to create solely a subset of the subviews.
Utilizing the identical approach above, we are able to even cross in a compositable for use as a part of a location-based composable format preview. For instance, if I need 4 profiles made up of two shade variations and two totally different button belongings:
We are able to then use the identical
PreviewParameterProvider for a unique composable if desired.
So subsequent time it is advisable to do a number of previews, even when utilizing composable parameters, take into account
To take a look at the total code used right here, see
ComposablePreviewParameters.kt on Github:
Thanks Francois Blavoet and Jamie Sanson helped me discover the ultimate answer.