グラデーション完全ガイド — linearGradient/radialGradient/sweepGradient/背景

Source: Dev.to

この記事で学べること

グラデーション（linearGradient、radialGradient、sweepGradient、テキストグラデーション）を解説します。

Brush.linearGradient

@Composable
fun GradientExamples() {
    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(12.dp)) {
        // 水平グラデーション
        Box(
            Modifier
                .fillMaxWidth()
                .height(80.dp)
                .background(
                    Brush.horizontalGradient(listOf(Color(0xFF6200EA), Color(0xFF03DAC5))),
                    RoundedCornerShape(12.dp)
                )
        )

        // 斜めグラデーション
        Box(
            Modifier
                .fillMaxWidth()
                .height(80.dp)
                .background(
                    Brush.linearGradient(
                        colors = listOf(Color(0xFFFF5722), Color(0xFFFFC107), Color(0xFF4CAF50)),
                        start = Offset.Zero,
                        end = Offset(Float.POSITIVE_INFINITY, Float.POSITIVE_INFINITY)
                    ),
                    RoundedCornerShape(12.dp)
                )
        )

        // 放射状グラデーション
        Box(
            Modifier
                .size(150.dp)
                .background(
                    Brush.radialGradient(
                        colors = listOf(Color.White, Color(0xFF2196F3)),
                        radius = 300f
                    ),
                    CircleShape
                )
        )

        // 扇形グラデーション
        Box(
            Modifier
                .size(150.dp)
                .background(
                    Brush.sweepGradient(
                        listOf(Color.Red, Color.Yellow, Color.Green, Color.Cyan, Color.Blue, Color.Red)
                    ),
                    CircleShape
                )
        )
    }
}

グラデーションボタン

@Composable
fun GradientButton(text: String, onClick: () -> Unit) {
    val gradient = Brush.horizontalGradient(
        listOf(Color(0xFF6200EA), Color(0xFFBB86FC))
    )

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(12.dp))
            .background(gradient)
            .clickable(onClick = onClick)
            .padding(vertical = 14.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(text, color = Color.White, fontWeight = FontWeight.Bold, fontSize = 16.sp)
    }
}

// グラデーションテキスト
@Composable
fun GradientText(text: String) {
    Text(
        text = text,
        style = TextStyle(
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold,
            brush = Brush.linearGradient(
                listOf(Color(0xFFFF5722), Color(0xFF9C27B0))
            )
        )
    )
}

まとめ

• Brushでグラデーション背景・枠線・テキストを実装
• linearGradientで方向指定のグラデーション
• radialGradientで中心から外周へ
• テキストにも brush パラメータで適用可能

8 種類の Android アプリテンプレート（カスタム UI 対応）を公開しています。
テンプレート一覧 → Gumroad

関連記事

• Border/Shadow
• カスタムCanvas
• カスタムShape

I publish 8 Android app templates on Gumroad.
Browse templates → Gumroad