Flutter 앱을 개발하면서 UI 요소에 그림자 효과를 추가하는 것은 앱의 디자인을 더욱 눈에 띄게 만들 수 있는 좋은 방법입니다. 이번에는 Flutter의 Card 위젯에 그림자 효과를 추가하는 방법에 대해 알아보겠습니다.

1. Card 위젯 생성

먼저 Card 위젯을 생성합니다. 아래는 기본적인 Card 위젯의 예제 코드입니다.

Card(
  child: ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('John Doe'),
    subtitle: Text('johndoe@example.com'),
  ),
)

위의 코드는 간단한 Card 위젯을 생성하고, 그 안에 ListTile을 추가한 예제입니다.

2. 그림자 효과 추가

Card 위젯에 그림자 효과를 추가하려면 elevation 속성을 활용하면 됩니다. elevation 속성은 Card의 높이만큼 그림자를 만들어주며, 값이 클수록 그림자의 깊이가 깊어집니다.

아래는 elevation 속성을 활용하여 그림자 효과를 추가한 예제 코드입니다.

Card(
  elevation: 5, // 그림자의 깊이를 나타내는 값
  child: ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('John Doe'),
    subtitle: Text('johndoe@example.com'),
  ),
)

위의 코드에서 elevation 값을 조절하여 그림자의 깊이를 조절할 수 있습니다.

3. 그림자 효과 커스터마이징

그림자의 색상을 변경하거나 모양을 커스터마이징하려면 shadowColor, shape 등의 속성을 활용할 수 있습니다. 이를 통해 디자인에 맞게 그림자를 조절할 수 있습니다.

Card(
  elevation: 5,
  shadowColor: Colors.red, // 그림자의 색상을 지정
  shape: RoundedRectangleBorder( // 그림자의 모양을 변경
    borderRadius: BorderRadius.circular(15),
  ),
  child: ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('John Doe'),
    subtitle: Text('johndoe@example.com'),
  ),
)

위의 코드에서는 shadowColor를 사용하여 그림자의 색상을 변경하고, shape 속성을 사용하여 그림자의 모양을 변경하는 예제입니다.

Card 위젯을 이용하여 그림자 효과를 추가하는 방법에 대해 알아보았습니다. 이를 통해 Flutter 앱의 UI를 더욱 풍부하고 멋지게 꾸밀 수 있을 것입니다.

더 많은 자세한 내용은 Flutter 공식 문서를 참고해주시기 바랍니다.

Flutter 공식 문서 - Card 클래스