Chip

Flutter에서 다양성을 표현하는 미니 컴포넌트: Chip

Chip은 Flutter에서 다양한 정보와 인터랙션을 소형 요소로 표현할 때 사용하는 위젯입니다. 이는 텍스트, 아이콘 또는 삭제 버튼을 포함할 수 있으며, 사용자가 태그, 선택 또는 입력을 시각적으로 제거하는 데 사용될 수 있습니다.

주요 속성

• label: 칩의 메인 콘텐츠로 표시될 텍스트를 나타냅니다. Text 위젯을 사용하여 구현합니다.
• avatar: 칩 앞쪽에 표시되는 원형 위젯으로, 주로 사용자의 프로필 이미지나 아이콘을 배치할 때 사용합니다.
• onDeleted: 칩에 삭제 버튼을 추가하고, 버튼이 눌렸을 때 실행할 콜백 함수를 지정합니다.
• backgroundColor: 칩의 배경 색상을 설정합니다.
• padding: 칩 내부의 패딩을 조절합니다.

주요 활용도

• 태그 및 필터 선택: 사용자가 선택한 태그나 필터를 시각적으로 표현하고, 이를 쉽게 삭제할 수 있게 합니다.
• 사용자 프로필: 소셜 미디어나 채팅 애플리케이션에서 사용자의 프로필 이미지나 이니셜을 빠르게 표시합니다.
• 입력된 데이터의 시각화: 사용자가 입력한 데이터를 칩의 형태로 표현하여, 데이터의 개별적인 관리를 용이하게 합니다.

코드 예제

아래 예제는 사용자의 선택을 나타내는 여러 칩을 생성하고 관리하는 방법을 보여줍니다.

Wrap(
  spacing: 8.0,
  children: <Widget>[
    Chip(
      label: Text('Adventure'),
      avatar: CircleAvatar(backgroundColor: Colors.green, child: Text('A')),
    ),
    Chip(
      label: Text('Mystery'),
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
      onDeleted: () {
        // 삭제 로직을 구현합니다.
      },
    ),
    Chip(
      label: Text('Romance'),
      avatar: CircleAvatar(backgroundColor: Colors.pink, child: Text('R')),
    ),
    // 추가 칩을 이곳에 배치할 수 있습니다.
  ],
)

관련 자료

• ActionChip: 클릭 가능하고, 클릭 이벤트를 처리할 수 있는 칩입니다.
• ChoiceChip: 선택 가능한 칩으로, 선택된 상태와 선택되지 않은 상태를 나타낼 수 있습니다.
• FilterChip: 선택 가능한 칩으로, 다중 선택을 지원합니다.
• InputChip: 입력된 정보와 함께 사용되며, 선택, 삭제 등의 기능을 가질 수 있습니다.

추가 참고 리소스

• 공식 문서 - Chip