Flutter에서 그림자(Shadow) 효과 적용하기

Flutter에서 **그림자 효과(Shadow Effect)**는 UI 요소에 깊이감과 입체감을 더하여 더 세련되고 시각적으로 매력적인 인터페이스를 만들 수 있도록 돕습니다. Flutter는 다양한 위젯과 속성을 제공하여 그림자를 손쉽게 추가할 수 있으며, 원하는 스타일에 맞게 커스터마이징할 수도 있습니다. 이번 글에서는 Flutter에서 그림자를 적용하는 다양한 방법과 활용 사례를 소개하겠습니다.

---

1. BoxShadow를 사용한 그림자 효과

Flutter에서 BoxShadow는 가장 기본적인 그림자 효과를 추가할 수 있는 도구입니다. BoxShadow는 BoxDecoration 클래스의 boxShadow 속성을 통해 적용할 수 있습니다.

1.1 기본 BoxShadow 예제

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('Shadow Example')),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,   // 그림자 색상
                  blurRadius: 10,       // 흐림 정도
                  offset: Offset(4, 4), // 그림자의 위치 (x, y)
                ),
              ],
              borderRadius: BorderRadius.circular(10),
            ),
            child: Center(
              child: Text(
                'BoxShadow Example',
                style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 

주요 속성:

• color: 그림자의 색상입니다. Colors.grey 또는 투명도를 추가한 색상을 사용하여 조정할 수 있습니다.
• blurRadius: 그림자의 흐림 정도를 설정합니다. 값이 클수록 그림자가 더 부드럽게 퍼집니다.
• offset: 그림자의 위치를 설정합니다. Offset(x, y)에서 x는 가로 방향, y는 세로 방향을 나타냅니다.

---

2. 여러 그림자 효과 추가하기

Flutter의 boxShadow 속성은 리스트 형식으로 여러 개의 그림자를 동시에 추가할 수 있습니다. 이를 통해 더욱 독특한 그림자 효과를 만들 수 있습니다.

2.1 다중 그림자 예제

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 5,
        offset: Offset(-5, -5),
      ),
      BoxShadow(
        color: Colors.blue.withOpacity(0.2),
        blurRadius: 10,
        offset: Offset(5, 5),
      ),
    ],
    borderRadius: BorderRadius.circular(15),
  ),
  child: Center(
    child: Text('Multiple Shadows'),
  ),
),

 

실행 결과:

• 위 코드는 상단 왼쪽(-5, -5)과 하단 오른쪽(5, 5)에 서로 다른 색상의 그림자를 추가하여 입체감을 더합니다.

---

3. ElevatedButton의 그림자 효과

Flutter의 ElevatedButton은 기본적으로 그림자 효과가 적용된 버튼입니다. shadowColor와 elevation 속성을 사용하여 버튼의 그림자 스타일을 커스터마이징할 수 있습니다.

3.1 ElevatedButton 그림자 커스터마이징

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,           // 버튼 색상
    shadowColor: Colors.grey,       // 그림자 색상
    elevation: 10,                  // 그림자의 높이
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
    ),
  ),
  onPressed: () {
    print('Button Pressed!');
  },
  child: Text('Elevated Button'),
),

 

주요 속성:

• shadowColor: 버튼 그림자의 색상을 설정합니다.
• elevation: 그림자의 높이를 설정합니다. 값이 클수록 그림자가 더 길게 나타납니다.

---

4. Icon과 Text에 그림자 효과 추가하기

Flutter는 Text와 Icon에도 간단한 그림자 효과를 추가할 수 있습니다.

4.1 Text에 그림자 추가

Text(
  'Hello, Shadow!',
  style: TextStyle(
    fontSize: 40,
    color: Colors.black,
    shadows: [
      Shadow(
        color: Colors.grey,
        blurRadius: 5,
        offset: Offset(3, 3),
      ),
    ],
  ),
),

 

• shadows: 텍스트의 그림자 속성입니다. Shadow 객체를 리스트로 추가합니다.

4.2 Icon에 그림자 추가

아이콘은 기본적으로 그림자 효과를 직접 지원하지 않지만, Container를 사용하여 아이콘에 그림자를 추가할 수 있습니다.

 

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        blurRadius: 5,
        offset: Offset(2, 2),
      ),
    ],
  ),
  child: Icon(
    Icons.favorite,
    color: Colors.red,
    size: 50,
  ),
),

 

---

5. CircleAvatar에 그림자 추가하기

CircleAvatar는 사용자 프로필과 같은 원형 이미지에 자주 사용되며, Container를 활용하여 그림자를 추가할 수 있습니다.

5.1 CircleAvatar 그림자 추가 예제

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 10,
        offset: Offset(5, 5),
      ),
    ],
  ),
  child: CircleAvatar(
    radius: 50,
    backgroundImage: AssetImage('assets/profile.jpg'),
  ),
),

 

• shape: BoxShape.circle: 원형 컨테이너에 그림자를 적용합니다.

---

6. CustomPaint와 함께 그림자 구현하기

CustomPaint와 Canvas를 사용하면 더욱 정교한 그림자 효과를 구현할 수 있습니다.

6.1 CustomPainter를 사용한 그림자 구현

class ShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey.withOpacity(0.5)
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 10); // 블러 효과
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      50,
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

CustomPaint(
  size: Size(200, 200),
  painter: ShadowPainter(),
),

 

• maskFilter: 그림자에 블러 효과를 적용합니다.
• CustomPainter: 원하는 그림자 스타일을 정밀하게 커스터마이징할 수 있습니다.

---

7. 그림자 효과의 활용 사례

그림자 효과는 다음과 같은 상황에서 유용하게 사용됩니다:

1. 카드 디자인:
   • Card 위젯의 elevation 속성을 사용하여 입체적인 카드 UI 구현.
2. 버튼 스타일링:
   • 버튼의 elevation과 shadowColor를 조정하여 다양한 디자인 생성.
3. 아이콘 및 텍스트 강조:
   • 중요한 UI 요소에 그림자를 추가해 시각적으로 강조.
4. 커스텀 디자인:
   • CustomPainter를 사용해 독창적인 그림자 스타일 구현.

---

결론

Flutter에서 제공하는 BoxShadow와 elevation, 그리고 텍스트 및 아이콘에 추가할 수 있는 다양한 그림자 옵션은 UI를 세련되고 입체적으로 보이게 만드는 데 매우 유용합니다. 또한, CustomPainter를 활용하면 더욱 정교하고 창의적인 그림자 효과를 구현할 수 있습니다. 이번 글에서 소개한 다양한 방법을 바탕으로 Flutter 애플리케이션에서 그림자 효과를 활용하여 더 멋진 디자인을 만들어보세요!