플러터에서 CheckboxListTile 위젯 사용법 및 옵션 가이드

 

Flutter에서 CheckboxListTile 위젯은 체크박스와 리스트 항목을 결합하여 사용자에게 간편한 선택 기능을 제공하는 유용한 위젯입니다. 이 위젯은 체크박스와 텍스트를 함께 표시하여, 사용자가 목록 항목을 선택하거나 해제할 수 있게 합니다.

이 블로그 포스트에서는 CheckboxListTile의 기본 사용법과 다양한 옵션을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

CheckboxListTile이란?

 

CheckboxListTile은 ListTile과 Checkbox를 결합한 위젯으로, 사용자가 목록에서 항목을 선택할 수 있도록 합니다.

이 위젯은 체크박스와 관련된 텍스트, 설명, 아이콘 등을 함께 배치하여 사용자 인터페이스를 더 직관적으로 만듭니다.

기본 사용법

CheckboxListTile의 기본 사용법은 매우 간단합니다. 다음은 기본적인 체크박스 리스트 항목을 설정하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CheckboxListTile 예제'),
        ),
        body: ListView(
          children: [
            CheckboxListTile(
              title: Text('체크박스 리스트 항목'),
              value: _isChecked,
              onChanged: (bool? value) {
                setState(() {
                  _isChecked = value ?? false;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

이 코드는 기본적인 CheckboxListTile을 사용하여 체크박스와 관련된 텍스트를 표시하는 방법을 보여줍니다.

주요 옵션 및 속성

1. title

• 설명: 리스트 항목의 제목을 설정합니다.
• 형식: Widget
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  ...
)

2. value

• 설명: 체크박스의 현재 선택 상태를 나타냅니다.
• 형식: bool
• 예제

CheckboxListTile(
  value: _isChecked,
  ...
)

3. onChanged

• 설명: 체크박스 상태가 변경될 때 호출되는 콜백 함수입니다.
• 형식: void Function(bool?)
• 예제

CheckboxListTile(
  onChanged: (bool? value) {
    setState(() {
      _isChecked = value ?? false;
    });
  },
  ...
)

4. subtitle

• 설명: 체크박스 항목의 하위 설명을 추가합니다.
• 형식: Widget
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  subtitle: Text('하위 설명'),
  ...
)

5. secondary

• 설명: 체크박스 항목의 끝에 표시할 아이콘 또는 위젯을 설정합니다.
• 형식: Widget
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  secondary: Icon(Icons.check),
  ...
)

6. activeColor

• 설명: 체크박스가 선택되었을 때의 색상을 설정합니다.
• 형식: Color
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  activeColor: Colors.green,
  ...
)

7. checkColor

• 설명: 체크박스에서 체크된 표시의 색상을 설정합니다.
• 형식: Color
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  checkColor: Colors.white,
  ...
)

8. controlAffinity

• 설명: 체크박스와 텍스트의 위치 관계를 설정합니다.
• 형식: ListTileControlAffinity
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  controlAffinity: ListTileControlAffinity.leading,
  ...
)

9. tristate

• 설명: 체크박스가 3가지 상태(체크됨, 체크되지 않음, 중간)를 지원하도록 설정합니다.
• 형식: bool
• 예제

CheckboxListTile(
  title: Text('항목 제목'),
  tristate: true,
  ...
)

결론

CheckboxListTile은 Flutter에서 체크박스와 리스트 항목을 쉽게 결합할 수 있는 유용한 위젯입니다.

다양한 옵션을 통해 체크박스의 동작과 스타일을 세밀하게 조정할 수 있으며, 사용자의 선택을 효율적으로 처리할 수 있습니다.

이 위젯을 사용하여 직관적이고 사용자 친화적인 목록을 만들어 보세요!

 

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

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