[flutter] 플러터 아이콘 라운드 처리

18 Dec 2023

flutter

플러터 앱을 개발하다보면 아이콘에 라운드 처리하는 것이 필요한 경우가 많습니다. 라운드 처리된 아이콘은 UI를 더 세련되게 만들어주며, 사용자에게 더 나은 시각적인 경험을 제공할 수 있습니다. 이번 글에서는 플러터에서 아이콘을 라운드 처리하는 방법에 대해 알아보겠습니다.

1. BoxDecoration 사용하기

가장 간단한 방법은 BoxDecoration을 사용하여 아이콘을 라운드 처리하는 것입니다.

Container(
  width: 50,
  height: 50,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.blue,
  ),
  child: Icon(Icons.home, color: Colors.white),
)

위 예제에서 Container 위젯의 decoration 속성을 사용하여 BoxDecoration을 정의하고, shape 속성을 BoxShape.circle로 설정하여 아이콘을 라운드 처리했습니다.

2. ClipOval 위젯 사용하기

또 다른 방법은 ClipOval 위젯을 사용하는 것입니다.

ClipOval(
  child: Container(
    width: 50,
    height: 50,
    color: Colors.blue,
    child: Icon(Icons.home, color: Colors.white),
  ),
)

ClipOval 위젯을 사용하면 자식 위젯이 타원 모양으로 클리핑되므로 아이콘을 쉽게 라운드 처리할 수 있습니다.

3. 외부 패키지 사용하기

플러터에서는 외부 패키지를 사용하여 라운드 처리된 아이콘을 만들 수도 있습니다. 예를 들어, flutter_icons 라이브러리를 사용하면 다양한 아이콘들을 쉽게 라운드 처리할 수 있습니다.

RoundedIcon(
  icon: Icons.home,
  backgroundColor: Colors.blue,
  iconColor: Colors.white,
  size: 50,
)

위 예제에서는 RoundedIcon 위젯을 사용하여 아이콘을 라운드 처리하였습니다. 이 패키지를 사용하면 라운드 처리된 아이콘을 더 다양하게 커스터마이징할 수 있습니다.

아이콘을 라운드 처리하는 방법은 다양하지만, 간단한 UI 요구사항에서부터 복잡한 디자인까지 다양한 상황에 맞게 적절한 방법을 선택하여 사용하시면 됩니다.

이상으로, 플러터에서 아이콘을 라운드 처리하는 방법에 대해 알아보았습니다. 감사합니다.

1. BoxDecoration 사용하기

2. ClipOval 위젯 사용하기

3. 외부 패키지 사용하기

참고 자료