[flutter] 아이콘의 색상과 배경을 조정하여 삽화효과를 주는 방법

22 Dec 2023

flutter

Flutter를 사용하여 아이콘에 삽화 효과를 주는 방법은 매우 간단합니다. 아이콘의 색상과 배경을 조정하여 삽화 효과를 만들 수 있습니다. 이를 위해 Icon 위젯을 사용하고 색상과 그림자를 이용하는 방법을 알아보겠습니다.

1. 아이콘의 색상 변경

아이콘의 색상을 변경하기 위해서는 Icon 위젯의 color 속성을 사용합니다.

예를 들어, 다음과 같이 코드를 작성합니다.

Icon(
  Icons.star,
  color: Colors.yellow,
)

위의 코드는 노란색으로 채워진 별 모양의 아이콘을 나타냅니다.

2. 아이콘에 그림자 효과 추가

아이콘에 그림자 효과를 추가하여 삽화 효과를 높일 수 있습니다. 이를 위해서는 Container 또는 BoxDecoration을 사용하여 그림자를 추가해야 합니다.

다음은 Container를 사용하여 아이콘에 그림자를 추가하는 예시입니다.

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.white,
    shape: BoxShape.circle,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Icon(
    Icons.star,
    color: Colors.yellow,
  ),
)

위의 코드는 흰색 배경에 노란색으로 채워진 별 모양의 아이콘에 그림자를 추가합니다.

마무리

본 방법을 사용하여 아이콘에 삽화 효과를 쉽게 부여할 수 있습니다. Flutter를 활용하여 색상과 배경을 조정하여 이런 효과를 만들어낼 수 있습니다.

참고 자료

Flutter 공식 문서: https://flutter.dev/docs