【Jetpack Compose】Themeを適用するとText要素のサイズが変わる

既存のxmlの実装をcomposeにリファクタしていたときに、全く同じサイズにしているのにTextを含む要素のサイズが変わり、膨大な時間を消費してしまったのでメモ

背景

行内の要素の大きさに合わせていい感じに折り返す必要がある画面で、
FlexboxLayoutをcomposeのFlowRowにリファクタしていた際、
Themeで囲うとなぜか本来折り返されないところで折り返された！！
　　→ テーマの有無で文字を含む要素のサイズが変わってる、、、？

Theme未適用時	Theme適用時

kotlin

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun FlexBlock() {
    MaterialTheme { //　この行の有無で1行の表示数が変わる
        FlowRow {
            for (i in 0..10) {
                Text(
                    text = "テキスト$i",
                    modifier = Modifier
                        .padding(5.dp)
                        .background(Color.Gray, RoundedCornerShape(3.dp))
                        .padding(horizontal = 7.dp, vertical = 4.dp)
                )
            }
        }
    }
}

本題: Themeを適用するとTextのletterSpacingが0.5.spに設定される

MaterialThemeはデフォルトでletterSpacing=0.5.spに設定されており、文字間にスペースが追加されるらしい
→ letterSpacing=0.spとすることで既存の実装と同じになって解決した
ピクセル単位で厳密にリファクタリングする必要がある際には覚えておいたほうがいいかも、、、

kotlin

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun FlexBlock() {
    MaterialTheme {
        FlowRow {
            for (i in 0..10) {
                Text(
                    text = "テキスト$i",
                    letterSpacing = 0.sp, // 追加する
                    modifier = Modifier
                        .padding(5.dp)
                        .background(Color.Gray, RoundedCornerShape(3.dp))
                        .padding(horizontal = 7.dp, vertical = 4.dp)
                )
            }
        }
    }
}