my first day in compose, so bear with me. There ar...

# compose

[Hassaan]

my first day in compose, so bear with me.
There are two ways to alter color or size of text, first by directly using Text parameters and second by using TextStyle parameters, how do they differ or what type should we use often to set color or textSize ?
eg in the below given code snippet i have set fontsize twice:

Text(
    text = "Hello world!",
    fontSize = 44.sp, // ist time
    style = TextStyle(
        fontSize = 24.sp,  // ist time
        shadow = Shadow(
            color = Color.Magenta,
            offset = offset,
            blurRadius = 3f
        )
    )
)

[Stylianos Gakis]

This video gives a hint about this

https://youtu.be/_qls2CEAbxI?t=105▾

.
Both work, supplying it directly will override it in the style, pick whatever you like the most.
I’d imagine if it’s something more general for the app, I’d expect it to be a change inthe style, while if it’s a unique change for only 1 place, I’d provide it using the direct parameters.

[Priyank]

Also from Text composable's documentation, the precedence will be to use the direct parameters of text first. If the parameters are not set then the values from style will be used instead.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

• If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.

• If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

[Valentin Gusselnikov]

You can open implementation of Text and see how it works under the hood. Basically it merges parameters with style. And parameters have higher "priority".

[mattinger]

Also, one of the big things to think about is putting text on surfaces, buttons, etc…. If you put an explicit color or alpha for your text, it will override the current ones defined in LocalContentColor and LocalContentAlpha. For instance, when you create a surface:

Surface {
   Text(text="foo")
}

The surface will have a background color of MaterialTheme.colors.surface and by default any content you have (text or icons) would have a color of MaterialTheme.colors.onSurface

This allows for icons and text to always be properly visible when used on a surface. In fact, various containers do similar things settings these default color and alpha values.

If you have a color in your TextStyle or give one to the Text function, you are overriding those defaults. And if done incorrectly can lead to some visual issues.

[mattinger]

My general recommendation is to use pre-defined text styles (see MaterialTheme.typography) and define your available styles when you create your theme. Fill out all your sizes, fontfamilies and lineheights/line spacing. But leave the color out (or use Color.Unspecified) Then you just pass that:

Text(style=MaterialTheme.typography.body1)

Unless you have a real need to color something, let the container you are using determine the color of your text.

[mattinger]

I would also recommend you NEVER directly reference a color value. Create a new class to hold your design systems colors, along with a composition local, and set them when you create your theme. You’ll thank yourself for doing that if you ever have to support a dark mode.