[flutter] 플러터 아이콘 배경 뒷면 처리

18 Dec 2023

flutter

플러터에서 아이콘의 배경을 처리하는 방법에 대해 알아보겠습니다.

1. 아이콘 위젯 만들기

가장 먼저 Icon 위젯을 사용하여 아이콘을 생성합니다.

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

위 코드에서 Icons.star는 별 아이콘을 의미하며, color와 size 속성을 사용하여 색상과 크기를 지정할 수 있습니다.

2. 아이콘에 배경 추가하기

아이콘에 배경을 추가하려면 Container 위젯을 사용하여 아이콘을 감싸야 합니다. 배경 색상 및 크기를 지정할 수 있습니다.

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    shape: BoxShape.circle,
  ),
  padding: EdgeInsets.all(10),
  child: Icon(
    Icons.star,
    color: Colors.yellow,
    size: 50,
  ),
),

위 코드에서 Container 위젯은 decoration 속성을 사용하여 배경의 색상과 모양을 지정합니다.

3. 뒷면 처리

기본적으로는 위의 코드로도 아이콘의 배경을 처리할 수 있지만, 뒷면에 표시되는 부분을 처리하려면 Stack과 Positioned 위젯을 사용하여 아이콘과 배경을 겹치도록 배치합니다.

Stack(
  children: [
    Positioned(
      left: 5,
      top: 5,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
        padding: EdgeInsets.all(10),
        child: Icon(
          Icons.star,
          color: Colors.yellow,
          size: 50,
        ),
      ),
    ),
  ],
),

위 코드에서 Stack과 Positioned를 사용하여 아이콘을 겹치시키고, Positioned의 left와 top 속성을 사용하여 아이콘의 위치를 조정합니다.

이제 플러터에서 아이콘의 배경을 처리할 수 있는 방법에 대해 알아보았습니다.

참고 문서: 플러터 공식 문서