flutter gradient 적용하기

Gradient는 Flutter에서 다양한 색상 변화를 적용할 수 있는 도구입니다.

Gradient 클래스를 사용하면 위젯에 부드러운 색상 전환 효과를 줄 수 있습니다.

Gradient의 주요 형태는 선형 그라디언트 (LinearGradient), 방사형 그라디언트 (RadialGradient), 그리고 대각선 그라디언트 (SweepGradient)가 있습니다.

 

주요 Gradient 종류

 

1. LinearGradient

2. RadialGradient

3. SweepGradient

 

1. LinearGradient

 

LinearGradient는 시작점과 끝점을 따라 색상이 선형으로 변화하는 그라디언트입니다.

 

주요 속성

 

• colors: 그라디언트에 사용될 색상 배열.

• begin: 그라디언트의 시작점.

• end: 그라디언트의 끝점.

• stops: 각 색상의 위치를 지정하는 배열 (선택적).

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  decoration: BoxDecoration(
    gradient: buildLinearGradient()
    
  ),
),

LinearGradient buildLinearGradient() {
    return LinearGradient(
          colors: [
            Colors.blue[100] as Color,
            Colors.blue[300] as Color,
            Colors.blue[500] as Color,
          ],
          // 왼쪽에서 오른쪽이 degault
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter
        );
  }

 

 

2. RadialGradient

RadialGradient는 중심점에서 방사형으로 퍼지는 그라디언트입니다.

 

주요 속성

 

• colors: 그라디언트에 사용될 색상 배열.

• center: 그라디언트의 중심점.

• radius: 그라디언트의 반지름.

• stops: 각 색상의 위치를 지정하는 배열 (선택적).

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  decoration: BoxDecoration(
    // gradient: buildLinearGradient()
    gradient: RadialGradient(
      center: Alignment.center,
      colors: [
        Colors.blue[100] as Color,
        Colors.blue[300] as Color,
        Colors.blue[500] as Color,
      ],
      radius: 1.0
    )
  ),
)

 

 

 

3. SweepGradient

 

SweepGradient는 중심점에서 시작하여 시계 방향으로 색상이 변하는 그라디언트입니다.

주요 속성

 

• colors: 그라디언트에 사용될 색상 배열.

• center: 그라디언트의 중심점.

• startAngle: 그라디언트가 시작되는 각도 (라디안 단위).

• endAngle: 그라디언트가 끝나는 각도 (라디안 단위).

• stops: 각 색상의 위치를 지정하는 배열 (선택적).

SweepGradient(
      colors: [Colors.red, Colors.blue, Colors.green],
      center: Alignment.center,
      startAngle: 0.0,
      endAngle: 3.14,
    )

 

 

 

주요 포인트

 

• LinearGradient: 선형으로 색상이 변화합니다. 시작점과 끝점을 설정할 수 있습니다.

• RadialGradient: 중심점에서 방사형으로 색상이 퍼집니다. 중심점과 반지름을 설정할 수 있습니다.

• SweepGradient: 중심점에서 시작하여 시계 방향으로 색상이 변화합니다. 중심점, 시작 각도, 끝 각도를 설정할 수 있습니다.

• colors: 그라디언트에 사용될 색상 배열입니다.

• stops: 각 색상의 위치를 지정하는 배열로, 색상이 위치를 명확히 제어할 수 있습니다.

 

Gradient 문서

 

• LinearGradient 클래스 문서

• RadialGradient 클래스 문서

• SweepGradient 클래스 문서