[flutter] 플러터 앱 아이콘에 그림자 효과를 사용하여 깊이감을 표현하는 방법

22 Dec 2023

flutter

많은 앱에서 아이콘에 그림자 효과를 사용하여 화면에 깊이감을 부여하고 있습니다. 이번 포스트에서는 플러터(Flutter)를 사용하여 앱 아이콘에 그림자 효과를 추가하는 방법을 알아보겠습니다.

1. 그림자(Shadow) 추가하기

그림자 효과를 추가하려면 Container 위젯을 사용하여 아이콘을 감싸고, 그림자를 설정해야 합니다. 이를 위해서는 Container의 boxShadow 속성을 이용합니다.

아래의 예제 코드를 통해 그림자 효과를 추가하는 방법을 알아봅시다.

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    boxShadow: [
       BoxShadow(
         color: Colors.grey,
         blurRadius: 10.0,
         spreadRadius: 2.0,
         offset: Offset(0, 3),
      ),
    ],
  ),
  child: Icon(Icons.coffee, size: 50, color: Colors.brown),
)

위 코드에서 Container는 아이콘을 감싸며, decoration 속성을 통해 boxShadow를 설정하여 그림자 효과를 부여합니다.

2. 그림자 효과 설정 속성

color: 그림자의 색상
blurRadius: 그림자의 흐림 정도
spreadRadius: 그림자의 확산 정도
offset: 그림자의 위치

3. 플러터 테마 설정에 그림자 효과 적용하기

만약 앱의 모든 아이콘에 일관된 그림자 효과를 적용하고 싶다면, 플러터 테마를 사용하여 일괄적으로 설정할 수 있습니다.

예를 들어, MaterialApp의 theme 속성을 통해 전역 테마를 설정하고, iconTheme의 shadowColor를 사용하여 그림자 색상을 지정할 수 있습니다.

MaterialApp(
  theme: ThemeData(
    iconTheme: IconThemeData(
      shadowColor: Colors.grey,
    ),
  ),
  home: MyHomePage(),
)

위 코드에서는 앱 전체적으로 아이콘에 그림자 효과를 부여하기 위해 해당 테마 속성을 사용하였습니다.

이제 여러분의 플러터(Flutter) 앱에서 아이콘에 그림자 효과를 추가하여 화면에 깊이감을 부여할 수 있습니다.