Flutter의 그라디언트(Gradient) 사용법

그라디언트(Gradient)는 색상이 부드럽게 전환되는 효과를 의미하며, Flutter에서 다양한 UI 요소에 적용하여 디자인을 더욱 세련되게 만들 수 있습니다. Flutter는 선형 그라디언트(LinearGradient), 방사형 그라디언트(RadialGradient), 경로 그라디언트(SweepGradient) 등 다양한 그라디언트 유형을 지원합니다. 이번 글에서는 Flutter에서 그라디언트를 사용하는 방법과 여러 유형의 그라디언트 적용 예제를 소개하겠습니다.

1. Flutter에서 그라디언트 사용하기

Flutter에서 그라디언트는 주로 Container 위젯의 decoration 속성을 사용해 적용할 수 있습니다. BoxDecoration 클래스의 gradient 속성에 그라디언트를 설정하여 사용합니다.

기본적인 그라디언트 적용 예제

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Gradient Example')),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.red],  // 색상 배열
                begin: Alignment.topLeft,          // 시작점
                end: Alignment.bottomRight,        // 끝점
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• LinearGradient: 선형 그라디언트로, 시작점에서 끝점으로 색상이 부드럽게 변합니다.
• colors: 그라디언트에 사용할 색상을 배열로 정의합니다.
• begin과 end: 그라디언트의 시작점과 끝점을 정의하며, Alignment를 사용해 좌표를 설정할 수 있습니다.

이 코드는 왼쪽 상단에서 오른쪽 하단으로 색상이 파란색에서 빨간색으로 변하는 선형 그라디언트를 생성합니다.

2. 선형 그라디언트(LinearGradient) 사용법

LinearGradient는 색상을 직선으로 변환하는 그라디언트입니다. 기본적으로 시작점에서 끝점까지 색상이 일정하게 변화합니다.

선형 그라디언트의 다양한 옵션

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.purple, Colors.orange, Colors.yellow],  // 여러 색상 추가
      begin: Alignment.topCenter,     // 중앙 상단에서 시작
      end: Alignment.bottomCenter,    // 중앙 하단에서 끝
      stops: [0.1, 0.5, 1.0],         // 각 색상의 위치 비율
    ),
  ),
),

• stops: 색상이 적용될 위치를 설정하는 배열입니다. 각 값은 색상이 시작되는 비율을 나타냅니다. 0.1은 시작점에서 10% 지점, 0.5는 50% 지점, 1.0은 100% 지점입니다.

이 예제는 보라색, 주황색, 노란색이 순차적으로 중앙에서 위아래로 그라디언트되며, 색상 변화의 위치를 조정합니다.

 

 

반응형

 

3. 방사형 그라디언트(RadialGradient) 사용법

RadialGradient는 원형으로 퍼지는 그라디언트입니다. 중심에서부터 바깥쪽으로 색상이 부드럽게 변화합니다.

방사형 그라디언트 적용 예제

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [Colors.green, Colors.blue],
      center: Alignment.center,   // 그라디언트의 중심 위치
      radius: 0.8,                // 그라디언트가 퍼지는 반경 (0.0 - 1.0)
    ),
  ),
),

• center: 그라디언트가 시작되는 중심점을 설정합니다. 기본값은 Alignment.center입니다.
• radius: 그라디언트가 얼마나 넓게 퍼질지를 결정하는 값입니다. 0.0은 중심에서만 색상이 적용되며, 1.0은 끝까지 그라디언트가 적용됩니다.

이 예제에서는 중심에서 녹색에서 파란색으로 변화하는 방사형 그라디언트를 적용합니다.

4. 경로 그라디언트(SweepGradient) 사용법

SweepGradient는 중심을 기준으로 시계방향 또는 반시계방향으로 색상이 변하는 그라디언트입니다.

경로 그라디언트 적용 예제

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    gradient: SweepGradient(
      colors: [Colors.red, Colors.yellow, Colors.blue],
      center: Alignment.center,   // 그라디언트 중심
      startAngle: 0.0,            // 그라디언트 시작 각도 (라디안)
      endAngle: 3.14,             // 그라디언트 끝 각도 (라디안, 3.14는 180도)
    ),
  ),
),

• startAngle과 endAngle: 그라디언트의 시작과 끝 각도를 설정합니다. 각도는 라디안 단위로 설정되며, 0은 오른쪽을, 3.14는 180도(반시계 방향)를 나타냅니다.

이 예제는 중심에서 시계방향으로 빨간색, 노란색, 파란색으로 변화하는 그라디언트를 적용합니다.

5. 텍스트에 그라디언트 적용하기

그라디언트는 텍스트에도 적용할 수 있습니다. Flutter에서 텍스트에 그라디언트를 적용하려면 ShaderMask 위젯을 사용해야 합니다.

텍스트에 그라디언트 적용 예제

ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.pink, Colors.blue],
  ).createShader(bounds),
  child: Text(
    'Gradient Text',
    style: TextStyle(fontSize: 40, color: Colors.white),
  ),
),

• ShaderMask: 위젯에 그라디언트를 적용하기 위해 사용하는 위젯입니다. shaderCallback을 통해 텍스트의 영역에 맞는 그라디언트를 적용합니다.

이 예제는 핑크색에서 파란색으로 변하는 그라디언트를 텍스트에 적용하여 시각적인 효과를 줍니다.

 

 

728x90

 

6. 버튼에 그라디언트 적용하기

버튼에 그라디언트를 적용하면, 버튼의 배경을 화려하게 꾸밀 수 있습니다. Flutter에서는 ButtonStyle을 사용하여 버튼에 그라디언트를 쉽게 적용할 수 있습니다.

ElevatedButton에 그라디언트 적용 예제

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(
      Colors.transparent,
    ),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
    ),
  ),
  onPressed: () {},
  child: Ink(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.purple, Colors.red],
      ),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Container(
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      child: Text(
        'Gradient Button',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),

• Ink: 버튼에 그라디언트를 적용하기 위한 위젯입니다. BoxDecoration을 사용해 그라디언트를 설정할 수 있습니다.
• ButtonStyle: 버튼의 스타일을 설정하는 속성으로, backgroundColor를 투명하게 설정하여 그라디언트 배경이 보이도록 합니다.

이 코드는 보라색에서 빨간색으로 그라디언트된 배경을 가진 버튼을 생성합니다.

결론

Flutter에서 그라디언트를 사용하는 방법은 매우 다양하며, UI의 디자인을 한층 더 돋보이게 할 수 있습니다. LinearGradient, RadialGradient, SweepGradient와 같은 다양한 그라디언트를 활용해 배경, 텍스트, 버튼에 적용할 수 있습니다. 이번 글에서 설명한 예제를 참고하여 Flutter 애플리케이션에서 그라디언트를 적극 활용해보세요!