[flutter] 플러터 Checkbox 히스토리와 로그 기능 추가하기

플러터 앱의 Checkbox 위젯은 사용자의 선택을 나타내는 데 유용한 기능입니다. 이번 블로그 포스트에서는 Checkbox의 히스토리와 로그 기능을 추가하는 방법을 알아보겠습니다.

체크박스 히스토리 기능 추가하기

체크박스의 히스토리 기능을 구현하기 위해서는 체크박스가 체크되거나 해제될 때마다 이벤트를 감지해야 합니다. Flutter에서는 StatefulWidget를 사용하여 상태 변경을 감지할 수 있습니다.

먼저, 체크박스를 포함할 StatefulWidget 클래스를 생성합니다.

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

class _MyCheckboxState extends State<MyCheckbox> {
  bool isChecked = false;
  List<String> history = [];

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: Text('Checkbox'),
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value;
          history.add(value.toString());
        });
      },
    );
  }
}

_MyCheckboxState 클래스에는 체크박스의 선택 여부를 저장하는 isChecked 변수와 체크박스의 선택 여부를 히스토리로 저장하는 history 변수가 있습니다. 또한, setState 메소드를 사용하여 상태가 변경될 때마다 화면을 다시 그리도록 합니다.

CheckboxListTile 위젯은 체크박스와 함께 제공되는 타이틀을 보여주는 위젯입니다. value 속성은 현재 체크박스의 선택 여부를 전달하고, onChanged 속성은 체크박스가 변경될 때마다 호출되는 함수를 지정합니다. 이 함수에서는 isCheckedhistory 값을 변경하고, 화면을 다시 그리도록 상태를 갱신합니다.

이제 MyCheckbox 위젯을 사용하여 체크박스를 추가할 수 있습니다.

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

MyCheckbox 위젯을 Center 위젯으로 감싸주어 가운데에 정렬되게 합니다. 앱의 홈 화면에 Scaffold 위젯을 추가하고, 앱바의 제목으로 ‘Checkbox History’를 설정합니다.

체크박스 로그 기능 추가하기

체크박스의 로그 기능을 추가하기 위해서는 체크박스의 선택 여부를 로그로 남기는 기능을 구현해야 합니다. Flutter에서는 print 함수를 사용하여 로그를 출력할 수 있습니다.

class _MyCheckboxState extends State<MyCheckbox> {
  // ...

  void logCheckboxValue(bool value) {
    print('Checkbox value: $value');
  }

  // ...
}

logCheckboxValue 함수는 체크박스가 선택되거나 해제될 때마다 호출되는 함수입니다. print 함수를 사용하여 체크박스의 선택 여부를 화면에 출력합니다.

이제 onChanged 함수에서 logCheckboxValue 함수를 호출하도록 수정합니다.

onChanged: (value) {
  setState(() {
    isChecked = value;
    history.add(value.toString());
    logCheckboxValue(value);
  });
},

위와 같이 수정하면, 체크박스의 선택 여부가 변경될 때마다 선택 여부가 로그로 출력됩니다.

결론

이번 블로그 포스트에서는 Flutter 앱에서 Checkbox의 히스토리와 로그 기능을 추가하는 방법을 알아보았습니다. Checkbox의 상태 변경을 감지하여 히스토리를 유지하고, 선택 여부를 로그로 출력할 수 있습니다. 이러한 기능을 활용하면 사용자의 선택 기록을 남기거나 디버깅에 도움이 되는 로그를 출력할 수 있습니다.