Textfield와TextFormField는 String만 반환해

pharmDev·2024년 12월 15일

Flutter의 TextField 또는 TextFormField는 항상 문자열(String) 형태로 값을 반환합니다.
이유는 TextField 위젯의 입력값이 텍스트 기반으로 처리되기 때문입니다.
그래서 사용자가 숫자만 입력하도록 UI를 제한하더라도, 입력값은 여전히 문자열로 반환됩니다.

따라서 int.parse 또는 int.tryParse를 사용해 문자열 값을 정수로 변환해야 합니다.


1. TextField에서 항상 문자열로 반환되는 이유

Flutter에서 TextField의 입력값은 텍스트 데이터로 처리됩니다.

  • 이유:
    • TextField는 텍스트를 입력하는 위젯으로 설계되었습니다.
    • Flutter는 숫자 입력만 허용하는 키보드(예: keyboardType: TextInputType.number)를 제공하지만, 이 키보드는 사용자가 숫자를 입력하도록 제한하는 UI를 제공할 뿐, 입력값은 여전히 String으로 반환됩니다.
TextField(
  keyboardType: TextInputType.number, // 숫자 전용 키보드 사용
  onChanged: (value) {
    print(value.runtimeType); // 항상 String 출력
  },
);
  • 입력값의 데이터 타입은 항상 String입니다.

2. 숫자 입력 전용으로 설정해도 여전히 문자열 반환

Flutter에서 숫자만 입력받도록 제한하려면 keyboardTypeinputFormatters를 사용합니다.
하지만 입력값은 여전히 문자열로 반환됩니다.

코드 예제

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class NumericInputExample extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextFormField(
          keyboardType: TextInputType.number, // 숫자 전용 키보드
          inputFormatters: [FilteringTextInputFormatter.digitsOnly], // 숫자만 허용
          onChanged: (value) {
            print(value.runtimeType); // 항상 String
          },
        ),
      ),
    );
  }
}

3. 문자열을 정수로 변환해야 하는 이유

Flutter의 기본 동작

  • TextFormField에서 입력값은 항상 String으로 반환됩니다.
  • 정수나 실수와 같은 숫자 타입으로 작업하려면 문자열을 변환해야 합니다.

변환하지 않을 경우 문제

  • 숫자 연산(예: 더하기, 빼기)을 수행할 수 없습니다.
  • UI에서 숫자 값으로 조건을 처리하거나 검증하기 어렵습니다.

4. 숫자 입력값 처리 흐름

1) 사용자가 숫자 입력

  • Flutter에서 TextFormField는 항상 문자열로 값을 반환합니다.

2) 문자열 값을 정수로 변환

  • int.parse 또는 int.tryParse를 사용하여 정수로 변환합니다.

예제 코드

void onStartTimeSaved(String? val) {
  if (val == null) {
    return;
  }

  // 문자열을 정수로 변환
  startTime = int.parse(val);
}

5. 문자열 변환 과정을 피할 수 있는가?

Flutter에서 TextFormField의 값이 텍스트(String)로 반환되기 때문에, 현재로서는 직접적으로 숫자를 반환하는 방법은 없습니다.

해결책?

입력값을 받아 숫자로 변환하는 도우미 함수 또는 중간 변환 작업이 필요합니다.


6. 결론

  1. TextFieldTextFormField의 입력값은 항상 문자열(String)로 반환됩니다.
  2. 숫자만 입력하도록 제한하려면 keyboardTypeinputFormatters를 설정해야 합니다.
  3. 입력값이 문자열로 반환되므로, 숫자 값으로 처리하려면 int.parse 또는 int.tryParse를 사용해야 합니다.
TextFormField(
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  onSaved: (val) {
    if (val != null) {
      final number = int.tryParse(val);
      print('숫자 값: $number');
    }
  },
);

Flutter의 텍스트 입력 방식에서는 문자열을 정수로 변환하는 과정은 필수적입니다. 😊

profile
코딩을 배우는 초보

0개의 댓글