[flutter] 플러터 앱 아이콘에 그림자 효과를 줘 입체감을 표현하는 방법
많은 모바일 앱이 3D 효과를 위해 아이콘에 그림자를 사용합니다. 플러터에서도 BoxDecoration 위젯을 사용하여 아이콘에 그림자 효과를 쉽게 추가할 수 있습니다.
그림자 효과 추가
먼저, DecorationImage를 사용하여 아이콘 이미지를 지정합니다. 이후 Container 위젯을 만들고 BoxDecoration를 사용하여 그림자 효과를 추가합니다.
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 그림자 위치 조절
),
],
),
child: Image(
image: AssetImage('assets/icon.png'),
),
)
위 코드에서, BoxShadow를 사용하여 그림자의 색상, 퍼지 반경, 흐림 반경, 그림자의 위치를 설정할 수 있습니다.
그림자 효과 사용 시 주의사항
그러나, 그림자 효과를 남용하면 앱 성능에 영향을 줄 수 있으므로 그림자의 사용을 최소화하는 것이 좋습니다.
위의 코드를 사용하여 플러터 앱 아이콘에 그림자 효과를 추가할 수 있습니다. 이를 통해 아이콘에 입체감을 더할 수 있고, 사용자 경험을 향상시킬 수 있습니다.
참고: Flutter BoxDecoration class