[flutter 23] flutter BoxShadow

boxShadow란?

Flutter에서 boxShadow는 위젯의 그림자 효과를 추가하는 데 사용됩니다.
주로 Container 위젯의 decoration 속성 안에서 **BoxDecoration**과 함께 사용되며, 그림자의 색상, 위치, 크기 등을 설정할 수 있습니다. 이 속성을 활용하면 위젯에 입체감과 시각적 효과를 부여할 수 있습니다.

---

boxShadow 속성의 주요 구성 요소

boxShadow는 List<BoxShadow> 타입을 가지며, 다음과 같은 속성으로 구성됩니다:

1. color:
   • 그림자의 색상을 지정합니다.
   • 기본값은 **Colors.black**입니다.
2. offset:
   • 그림자의 위치를 설정합니다.
   • Offset(dx, dy) 형식으로 가로(x축) 및 세로(y축) 방향으로 이동 거리를 설정합니다.
   • 예: Offset(4, 4)은 그림자를 오른쪽 아래로 4px 이동시킵니다.
3. blurRadius:
   • 그림자의 흐림 정도를 설정합니다.
   • 값이 클수록 그림자가 더 부드럽고 퍼져 보입니다.
4. spreadRadius:
   • 그림자의 크기를 설정합니다.
   • 양수: 그림자가 더 커짐
     음수: 그림자가 더 작아짐

---

코드 예제와 주석

아래는 boxShadow를 사용하는 예제 코드입니다.

 

import 'package:flutter/material.dart'; // Flutter Material Design 라이브러리 임포트

void main() {
  runApp(MyApp()); // 애플리케이션 시작
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter boxShadow Example'), // 앱바 제목 설정
        ),
        body: Center(
          child: Container(
            // 박스를 만드는 Container 위젯
            width: 200, // 박스의 너비
            height: 200, // 박스의 높이
            decoration: BoxDecoration(
              color: Colors.white, // 박스의 배경색
              borderRadius: BorderRadius.circular(15), // 박스의 둥근 모서리 설정
              boxShadow: [
                // 그림자 속성 설정
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5), // 그림자의 색상과 투명도 설정
                  offset: Offset(5, 5), // 그림자를 오른쪽 아래로 5px 이동
                  blurRadius: 10, // 그림자의 흐림 정도 설정
                  spreadRadius: 2, // 그림자의 크기 확장
                ),
                BoxShadow(
                  color: Colors.blue.withOpacity(0.3), // 추가 그림자 (파란색)
                  offset: Offset(-3, -3), // 왼쪽 위로 3px 이동
                  blurRadius: 5, // 흐림 정도
                  spreadRadius: 1, // 크기 확장
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

boxshadow 예제

 

라인별 주요 설명

1. BoxShadow 리스트:
   • boxShadow는 여러 개의 BoxShadow를 설정할 수 있어 다층 그림자를 만들 수 있습니다.
2. 첫 번째 그림자:
   • 색상: Colors.grey.withOpacity(0.5)로 회색 그림자에 반투명 효과 추가.
   • 위치: Offset(5, 5)로 그림자를 오른쪽 아래로 이동.
   • 흐림: blurRadius: 10으로 부드럽고 퍼진 그림자 효과.
   • 크기: spreadRadius: 2로 그림자 크기 확장.
3. 두 번째 그림자:
   • 추가로 파란색 그림자를 설정하여 다층 효과를 만듦.
   • 위치: Offset(-3, -3)으로 그림자를 왼쪽 위로 이동.

---

boxShadow를 효과적으로 사용하는 방법

1. 사용 목적:
   • 위젯에 입체감을 추가하거나 강조하고 싶을 때 사용합니다.
   • 버튼, 카드, 알림 창 등 다양한 UI 요소에서 활용됩니다.
2. 스타일링 팁:
   • 투명도를 조정(withOpacity)하여 부드러운 그림자를 만들 수 있습니다.
   • 여러 BoxShadow를 결합해 복잡하고 아름다운 그림자 효과를 연출하세요.

---

추가적으로 궁금한 점이나 다른 Flutter 위젯에 대해 질문이 있다면 언제든지 알려주세요! 😊