[flutter] 플러터 Checkbox 이벤트 처리 방법

07 Dec 2023

flutter

플러터에서 Checkbox 위젯은 사용자로부터 선택을 받을 수 있는 기능을 제공하는 위젯입니다. 이번에는 Checkbox의 이벤트를 처리하는 방법에 대해 알아보겠습니다.

Checkbox 위젯 생성하기

먼저 Checkbox 위젯을 생성해야 합니다. 아래 예시 코드는 Checkbox를 생성하는 방법을 보여줍니다.

bool checkBoxValue = false;

Checkbox(
  value: checkBoxValue,
  onChanged: (bool newValue) {
    setState(() {
      checkBoxValue = newValue;
    });
  },
)

Checkbox 위젯은 value 프로퍼티를 통해 현재 선택된 상태를 나타내고, onChanged 프로퍼티를 통해 변경된 상태를 처리할 콜백 함수를 설정합니다.

이벤트 처리하기

Checkbox의 상태가 변경되었을 때 실행되는 콜백 함수를 이용하여 이벤트를 처리할 수 있습니다. 위의 예시 코드에서는 onChanged 프로퍼티에 익명 함수를 설정하여 상태가 변경될 때마다 해당 함수가 실행됩니다.

onChanged: (bool newValue) {
  setState(() {
    checkBoxValue = newValue;
    // 선택 상태에 따른 추가적인 로직을 처리합니다.
  });
},

위 코드에서는 setState 메소드를 호출하여 위젯의 상태를 업데이트하고, 선택에 따른 추가적인 로직을 처리할 수 있습니다.

최종 코드

아래는 Checkbox와 이벤트 처리를 포함한 전체 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Checkbox Example')),
        body: Center(
          child: MyCheckbox(),
        ),
      ),
    );
  }
}

class MyCheckbox extends StatefulWidget {
  @override
  _MyCheckboxState createState() => _MyCheckboxState();
}

class _MyCheckboxState extends State<MyCheckbox> {
  bool checkBoxValue = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: checkBoxValue,
      onChanged: (bool newValue) {
        setState(() {
          checkBoxValue = newValue;
          // 선택 상태에 따른 추가적인 로직을 처리합니다.
        });
      },
    );
  }
}

이제 Checkbox 위젯과 이벤트 처리를 올바르게 구현하여 플러터 앱에서 사용자의 선택에 반응할 수 있습니다.

Checkbox 위젯 생성하기

이벤트 처리하기

최종 코드

참고 자료