플러터에서 LinearGradient 위젯 사용법과 다양한 옵션 가이드

Flutter에서 그라디언트(Gradient) 배경을 구현하고 싶다면 LinearGradient를 활용할 수 있습니다.

LinearGradient는 선형 그라디언트를 만드는 데 사용되며, 다양한 색상을 섞어 부드럽게 변하는 배경을 만들 수 있습니다.

이 포스트에서는 LinearGradient의 기본 사용법부터 다양한 옵션까지 다루고, 실습 예제를 통해 이해를 돕겠습니다.

1. LinearGradient 위젯이란?

LinearGradient는 두 개 이상의 색상이 선형으로 섞이는 효과를 만드는 위젯입니다.

이 위젯을 사용하면 앱의 배경, 버튼, 텍스트 등 다양한 요소에 멋진 그라디언트 효과를 적용할 수 있습니다.

주요 특징

• 선형 그라디언트: 색상이 지정한 방향에 따라 선형으로 부드럽게 변합니다.
• 다양한 색상 조합: 두 개 이상의 색상을 조합해 여러 스타일의 그라디언트를 만들 수 있습니다.
• 적용 가능 범위: 컨테이너, 텍스트, 이미지 등에 모두 적용할 수 있습니다.

2. LinearGradient 기본 사용법

LinearGradient는 주로 Container나 BoxDecoration과 함께 사용됩니다. 아래는 기본적인 사용 예제입니다.

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('Flutter LinearGradient 예제'),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.purple],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
            ),
            child: Center(
              child: Text(
                '그라디언트 배경',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

코드 설명

• colors: 그라디언트를 구성할 색상 리스트입니다. 이 예제에서는 Colors.blue와 Colors.purple이 사용되었습니다.
• begin: 그라디언트의 시작 위치를 설정합니다. Alignment.topLeft는 좌측 상단에서 시작하도록 지정합니다.
• end: 그라디언트의 끝 위치를 설정합니다. Alignment.bottomRight는 우측 하단에서 끝나도록 지정합니다.

3. LinearGradient의 주요 옵션

LinearGradient는 다양한 옵션을 제공하여 더욱 세밀하게 그라디언트를 조정할 수 있습니다.

3.1 색상 리스트 (colors)

LinearGradient는 최소 두 개 이상의 색상을 필요로 합니다. 원하는 만큼 색상을 추가해 더 복잡한 그라디언트를 만들 수 있습니다.

gradient: LinearGradient(
  colors: [Colors.red, Colors.orange, Colors.yellow],
),

이 예제에서는 세 가지 색상이 부드럽게 연결되는 그라디언트를 만듭니다.

3.2 시작과 끝 위치 (begin과 end)

그라디언트의 시작과 끝 위치를 Alignment 속성을 사용해 지정할 수 있습니다. 기본적으로 좌측 상단에서 우측 하단으로 그라디언트가 생성됩니다.

gradient: LinearGradient(
  colors: [Colors.blue, Colors.purple],
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
),

이 예제에서는 그라디언트가 위에서 아래로 수직으로 그려집니다.

3.3 중간 색상 위치 지정 (stops)

stops 속성을 사용하면 각 색상이 그라디언트 내에서 정확히 어디에 위치할지 지정할 수 있습니다.

이 속성은 색상의 위치를 0.0에서 1.0 사이의 값으로 정의합니다.

gradient: LinearGradient(
  colors: [Colors.red, Colors.blue],
  stops: [0.3, 0.7],
),

위의 예제는 빨간색이 30%까지, 파란색이 70%부터 시작하도록 합니다.

3.4 타일 모드 (tileMode)

tileMode는 그라디언트를 어떻게 타일로 채울지 결정하는 옵션입니다. 주로 clamp, mirror, repeated의 세 가지 옵션이 있습니다.

• clamp (기본값): 그라디언트를 끝까지 그린 후 마지막 색상을 유지합니다.
• mirror: 그라디언트를 반복하지만 반대로 그립니다.
• repeated: 그라디언트를 동일한 방향으로 반복합니다.

gradient: LinearGradient(
  colors: [Colors.red, Colors.blue],
  tileMode: TileMode.mirror,
),

위 예제는 그라디언트를 반복하지만, 두 번째 반복은 반대 방향으로 그려집니다.

4. LinearGradient를 활용한 고급 사용법

4.1 버튼에 그라디언트 적용

LinearGradient를 버튼의 배경으로 사용할 수도 있습니다.

이는 일반적인 버튼과는 차별화된, 시각적으로 매력적인 UI 요소를 만들 때 유용합니다.

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.green, Colors.teal],
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
    ),
    child: Text('그라디언트 버튼'),
  ),
),

이 예제에서는 ElevatedButton 위젯에 그라디언트 배경을 적용했습니다.

4.2 텍스트에 그라디언트 적용

텍스트에도 그라디언트를 적용할 수 있습니다. 이를 통해 더 독특하고 시각적으로 흥미로운 텍스트 스타일을 만들 수 있습니다.

ShaderMask(
  shaderCallback: (bounds) => LinearGradient(
    colors: [Colors.blue, Colors.red],
  ).createShader(bounds),
  child: Text(
    '그라디언트 텍스트',
    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),
),

 

• ShaderMask: shaderCallback 속성에서 LinearGradient를 생성하여 텍스트에 그라디언트를 적용합니다.
• Text 위젯: 텍스트의 color를 Colors.white로 설정했으며, 그라디언트 효과를 적용하기 위해 ShaderMask로 감쌌습니다.
• Center 위젯: 텍스트를 화면 중앙에 배치하기 위해 Center 위젯을 사용했습니다.

 

 

5. 결론

LinearGradient는 Flutter에서 매력적인 그라디언트 효과를 쉽게 구현할 수 있는 도구입니다.

색상, 방향, 위치 등을 자유롭게 조절해 다양한 디자인을 구현할 수 있으며, 앱의 시각적 매력을 높이는 데 크게 기여할 수 있습니다.

이 가이드를 통해 LinearGradient의 기본 사용법과 옵션을 익히고, 더 멋진 Flutter 앱을 개발해 보세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱