JetpackComposeでFloatingActionButtonの中央にアイコンを表示する実装方法

今回はJetpackComposeでFloatingActionButtonの中央にアイコンを表示する実装を行いたいと思います。

単純なFloatingActionButtonでアイコンだけ表示させたい時に、中心ではなく左寄せで表示されてしまっていたので、中央にアイコンだけ表示させたい場合の実装方法です。

実装方法

こちらはそのままiconに設定した場合です

ExtendedFloatingActionButtonView.kt

@Composable
fun ExtendedFloatingActionButtonView() {
    Column {
        ExtendedFloatingActionButton(
            icon = { Icon(Icons.Filled.Favorite, "Favorite") },
            text = { Text("") },
            onClick = { /*今回は説明に必要ないので省略します。*/ },
            elevation = FloatingActionButtonDefaults.elevation(8.dp)
        )
    }
}

通常ではこのように設定すると思います。
ですがこの場合左にずれてしまいます。

ExtendedFloatingActionButtonView.kt

@Composable
fun ExtendedFloatingActionButtonView() {
    Column {
        ExtendedFloatingActionButton(
            text = { Icon(Icons.Filled.Favorite, "Favorite") },
            onClick = { /*今回は説明に必要ないので省略します。*/ },
            elevation = FloatingActionButtonDefaults.elevation(8.dp)
        )
    }
}

text = { Icon(Icons.Filled.Favorite, "Favorite") }

こちらのようにtextの引数に対して設定をすると中央に表示してくれます。

以上です！