Flutter에서 DataTable을 사용하여 데이터를 표 형식으로 표시하고 수정하는 것은 매우 일반적입니다. 특정 셀에 입력 값을 제한하거나 유효성을 검사하려면 몇 가지 추가적인 단계가 필요합니다. 이 포스트에서는 Flutter 앱에서 DataTable에서 특정 셀에 입력 유효성 검사를 추가하는 방법에 대해 설명하겠습니다.

1. 셀 생성 및 유효성 검사 함수 정의

먼저, 데이터 테이블을 생성하고 각 셀에 유효성 검사를 추가할 준비를 해야 합니다. 각 데이터 셀은 DataCell 위젯으로 생성됩니다. 이 위젯은 onTap 핸들러와 함께 셀을 만들 수 있으므로, 여기에 유효성 검사를 수행할 수 있는 함수를 정의할 수 있습니다.

이 예제에서는 간단한 유효성 검사 함수를 작성해보겠습니다.

Widget buildDataTable() {
  return DataTable(
    columns: [
      DataColumn(label: Text('이름')),
      DataColumn(label: Text('나이')),
    ],
    rows: [
      DataRow(cells: [
        DataCell(TextFormField(
          validator: (value) {
            if (value.isEmpty) {
              return '이름을 입력하세요.';
            }
            return null;
          },
        )),
        DataCell(TextFormField(
          validator: (value) {
            if (value.isEmpty) {
              return '나이를 입력하세요.';
            }
            return null;
          },
        )),
      ]),
    ],
  );
}

위 코드에서, TextFormField 위젯에 validator를 추가하여 간단한 유효성 검사를 수행하고 있습니다.

2. 유효성 검사 및 에러 메시지 표시

유효성 검사 함수는 사용자가 입력한 값이 유효하지 않을 때 문자열을 반환합니다. 이에 따라 DataTable의 특정 셀에 에러 메시지를 표시할 수 있습니다.

TextFormField(
  validator: (value) {
    if (value.isEmpty) {
      return '이름을 입력하세요.';
    }
    return null;
  },
),

위 코드에서 보면, validator 함수가 값이 비어 있을 때 '이름을 입력하세요.'라는 에러 메시지를 반환하고 있습니다.

3. 저장 버튼과 유효성 검사 실행

마지막으로, 데이터 테이블 내의 입력 값을 저장하는 버튼을 구현하고, 해당 버튼을 누를 때 모든 셀의 유효성 검사를 실행하도록 설정할 수 있습니다.

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState.validate()) {
      // 입력값 저장
    }
  },
),

_formKey.currentState.validate()를 호출하여 모든 유효성 검사가 통과했는지 확인하고, 통과했을 경우 입력값을 저장하는 로직을 실행할 수 있습니다.

이제 DataTable에서 특정 셀에 입력 유효성 검사를 추가하는 방법에 대해 알아보았습니다. 이러한 유효성 검사를 통해 사용자들이 정확하고 유효한 데이터를 입력할 수 있도록 도와줄 수 있습니다.