플러터 ChoiceChip으로 선택형 UI 구현하기

 

Flutter는 사용자 인터페이스를 구성할 때 유용한 다양한 위젯을 제공합니다.

그중 ChoiceChip 위젯은 사용자가 여러 옵션 중 하나를 선택할 수 있게 해주는 훌륭한 도구입니다.

오늘은 ChoiceChip 위젯의 기본 사용법과 다양한 옵션을 살펴보겠습니다.

 

ChoiceChip 위젯이란?

ChoiceChip은 Flutter에서 제공하는 Material 디자인 위젯 중 하나로, 사용자가 여러 선택지 중 하나를 선택할 수 있도록 도와줍니다.

주로 필터링, 카테고리 선택, 태그 표시 등에서 사용됩니다.

ChoiceChip은 선택되었을 때와 그렇지 않을 때의 상태를 시각적으로 구분할 수 있습니다.

기본 사용법

ChoiceChip 위젯을 사용하려면 label로 표시할 텍스트나 위젯을 제공하고, selected 상태를 관리해야 합니다.

선택 상태를 관리하려면 selected 속성과 함께 선택 상태가 변경될 때 호출되는 onSelected 콜백 함수를 설정합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChoiceChipExample(),
    );
  }
}

class ChoiceChipExample extends StatefulWidget {
  @override
  _ChoiceChipExampleState createState() => _ChoiceChipExampleState();
}

class _ChoiceChipExampleState extends State<ChoiceChipExample> {
  String _selectedChoice = 'Apple';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter ChoiceChip Example')),
      body: Center(
        child: Wrap(
          spacing: 10.0,
          children: [
            ChoiceChip(
              label: Text('Apple'),
              selected: _selectedChoice == 'Apple',
              onSelected: (bool selected) {
                setState(() {
                  _selectedChoice = selected ? 'Apple' : '';
                });
              },
            ),
            ChoiceChip(
              label: Text('Banana'),
              selected: _selectedChoice == 'Banana',
              onSelected: (bool selected) {
                setState(() {
                  _selectedChoice = selected ? 'Banana' : '';
                });
              },
            ),
            ChoiceChip(
              label: Text('Cherry'),
              selected: _selectedChoice == 'Cherry',
              onSelected: (bool selected) {
                setState(() {
                  _selectedChoice = selected ? 'Cherry' : '';
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

주요 속성 설명

• label: Widget 타입, ChoiceChip에 표시될 텍스트 또는 위젯입니다.
• selected: bool 타입, 선택 여부를 나타냅니다.
• onSelected: Function(bool) 타입, 사용자가 선택 상태를 변경할 때 호출되는 콜백 함수입니다.

ChoiceChip 위젯의 다양한 옵션

selectedColor

선택된 상태일 때의 배경 색상을 설정합니다.

ChoiceChip(
  label: Text('Apple'),
  selected: _selectedChoice == 'Apple',
  selectedColor: Colors.blue,
  onSelected: (bool selected) {
    setState(() {
      _selectedChoice = selected ? 'Apple' : '';
    });
  },
)

disabledColor

ChoiceChip이 비활성화되었을 때의 배경 색상을 설정합니다.

ChoiceChip(
  label: Text('Apple'),
  selected: _selectedChoice == 'Apple',
  disabledColor: Colors.grey,
  onSelected: null, // null을 설정하면 비활성화됩니다.
)

avatar

ChoiceChip의 왼쪽에 표시할 아이콘이나 이미지를 설정합니다. 이를 통해 선택지를 더 명확하게 구분할 수 있습니다.

ChoiceChip(
  label: Text('Apple'),
  selected: _selectedChoice == 'Apple',
  avatar: CircleAvatar(child: Text('A')),
  onSelected: (bool selected) {
    setState(() {
      _selectedChoice = selected ? 'Apple' : '';
    });
  },
)

labelStyle

ChoiceChip의 라벨 텍스트 스타일을 지정합니다.

ChoiceChip(
  label: Text('Apple'),
  selected: _selectedChoice == 'Apple',
  labelStyle: TextStyle(color: Colors.white),
  onSelected: (bool selected) {
    setState(() {
      _selectedChoice = selected ? 'Apple' : '';
    });
  },
)

shape

ChoiceChip의 모양을 커스터마이즈할 수 있습니다. 기본적으로는 둥근 모서리로 제공되지만, 원하는 대로 모양을 변경할 수 있습니다.

ChoiceChip(
  label: Text('Apple'),
  selected: _selectedChoice == 'Apple',
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  onSelected: (bool selected) {
    setState(() {
      _selectedChoice = selected ? 'Apple' : '';
    });
  },
)

마무리

ChoiceChip 위젯은 Flutter에서 간단하게 선택형 UI를 구현할 수 있는 도구입니다. 다양한 속성을 통해 선택된 상태와 선택되지 않은 상태를 시각적으로 구분할 수 있으며, onSelected 콜백을 사용하여 사용자의 선택 상태를 관리할 수 있습니다. 이를 통해 사용자는 더 직관적이고 편리한 인터페이스를 경험할 수 있습니다.

이 블로그가 여러분의 Flutter 프로젝트에 도움이 되었기를 바랍니다! 추가적인 질문이나 설명이 필요하면 댓글로 남겨주세요.

앞으로도 더 많은 Flutter 관련 팁과 트릭을 공유할 예정이니, 블로그 구독을 잊지 마세요!

 

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱