[flutter/플러터] 버튼으로 Checkbox 토글하기

Demo

 

 

편집하기 버튼을 누르면 리스트 앞에 체크박스가 나타나면서 따로 선택할 수 있게 레이아웃을 구현해야한다. 

 

 

 

레이아웃 구성

• '편집하기' 와 '삭제하기' 버튼을 boolean 값으로 구분해서 만들기
• Listview로 checkbox와 text를 한 줄로 넣어서 만들어준다
• boolean값으로 checkbox가 나올때와 안 나올 때를 구분한다

 

 

 

 

 

 

반복되서 들어갈 checkboxmodal widget을 만들어줍니다

Listview 안에 들어갈 checkboxmodal을 만들어줍니다. title과 time은 필수라서 required를 붙여줍니다. 

class CheckBoxModal {
  String title;
  bool value;
  String time;
  String purpose;

  CheckBoxModal(
      {required this.title,
      this.value = false,
      required this.time,
      required this.purpose});
}

 

_isChecked와 _isEdit는 편집하기 / 삭제하기 버튼 구분과 멀티 선택을 위한 boolean값을 나타냅니다

checkBoxList를 map으로 돌릴 수 있게 그 안에 필요한 checkboxmodal을 넣어줍니다

class _myNotificationState extends State<myNotification> {
  bool _isChecked = false;
  bool _isEdit = false;

  final allChecked =
      CheckBoxModal(title: 'all Checked', time: '11:00', purpose: 'chat');
  final checkBoxList = [
    CheckBoxModal(
        title: '짱구 님에게 친구 신청이 왔습니다', time: '12:30', purpose: 'help'),
    CheckBoxModal(
        title: '코난 님으로 부터 대화 신청이 왔습니다', time: '12:30', purpose: 'chat'),
    CheckBoxModal(
        title: '남도일 님으로 부터 도움 신청이 왔습니다', time: '12:30', purpose: 'help'),
  ];


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          margin: EdgeInsets.only(top: 20),
          child: Column(
            children: [
            ........
              Column(
                children: [
                  //편집하기,삭제하기 버튼
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        width: 80.0,
                        height: 24.0,
                        margin: EdgeInsets.only(left: 16, right: 16),
                        child: ElevatedButton(
                          child: Text(
                            _isEdit ? "삭제하기" : "편집하기",
                            style:  TextStyle(fontSize: 12),
                          ),
                          onPressed: () {
                            setState(() {
                              if (!_isEdit) {
                                _isEdit = true;
                              } else {
                                _isEdit = false;
                              }
                            });
                          },
                          style: ElevatedButton.styleFrom(
                            primary: Colors.purple,
                            onPrimary: Colors.white,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(32.0),
                            ),
                          ).copyWith(
                              elevation: ButtonStyleButton.allOrNull(0.0)),
                        ),
                      ),
                    ],
                  ),
                  ListView(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    children: [
                      Divider(),
                      ...checkBoxList
                          .map(
                            (item) => ListTile(
                                title: SizedBox(
                              child: Column(
                                children: [
                                  Row(
                                    //mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      _isEdit
                                          ? SizedBox(
                                              width: 30,
                                              height: 20,
                                              child: Transform.scale(
                                                scale: 0.7,
                                                child: Checkbox(
                                                  value: item.value,
                                                  onChanged: (value) {
                                                    onAllClicked(item);
                                                  },
                                                  activeColor: Colors.purple,
                                                ),
                                              ),
                                            )
                                          : SizedBox(width: 0),
                                      SizedBox(
                                        width: _isEdit
                                            ? MediaQuery.of(context)
                                                    .size
                                                    .width -
                                                130
                                            : MediaQuery.of(context)
                                                    .size
                                                    .width -
                                                110,
                                        child: Text(item.title,
                                            textAlign: TextAlign.left,
                                            style: TextStyle(
                                              color: Color(0xff47505F),
                                              fontSize: 12,
                                              fontWeight: FontWeight.w700,
                                            )),
                                      ),
                                      if (!_isEdit)
                                        Container(
                                          child: Text(
                                            item.time,
                                            style: TextStyle(fontSize: 14),
                                          ),
                                        ),
                                    ],
                                  ),
                                  SizedBox(height: 5),
                                  Divider(),
                                ],
                              ),
                            )),
                          )
                          .toList(),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  onAllClicked(CheckBoxModal ckbItem) {
    setState(() {
      ckbItem.value = !ckbItem.value;
    });
  }
}