본문 바로가기
개발/플러터

[플러터] CheckboxListTile 에 대하여

by 핸디(Handy) 2020. 5. 24.

CheckboxListTile 란 말그대로 Checkbox를 가진 ListTile 입니다. 체크박스가 필요할때 하나의 ListTile로 묶어 쉽게 생성하고 관리합니다.

<전체 코드>

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'CheckboxListTile Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _ischecked = false;
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: const Text('title : CheckBox'),
      subtitle: const Text('subtitle : click me!'),
      value: _ischecked,
      onChanged: (bool value) {
        setState(() {
          _ischecked = value;

        });
      },
      secondary: const Icon(Icons.home),
      activeColor: Colors.red,
      checkColor: Colors.black,
      isThreeLine: false,
      selected: _ischecked,
    );
  }
}

title : 리스트 안에 나올 텍스트
subtitle : 리스트 안에 나올 서브텍스트
value : 체크박스가 가질 값입니다.
onChanged : 체크박스가 클릭되었을때 변경되는 값으로 true, false 가 있습니다.
secondary : 앞에 위치할 이미지, 또는 특정한 위젯입니다.
activeColor : 체크박스가 체크되었을때 나타나는 배경색입니다.
checkColor : 체크박스가 체크되었을때 생기는 체크이미지의 색상입니다.
isThreeLine : 3줄로 할것인가 
selected : true로 하면 텍스트와 아이콘에 activeColor 가 들어감. 따라서 setState에서 받아온 값을 넣어두면 동시에 변환가능

댓글