지난 글까지 화면을 배치하고 스크롤시키는 법을 봤으니, 이번엔 사용자 입력을 받는 차례다. 이름을 입력하면 아래에 "안녕, 홍길동"이 뜨는 화면을 만들어보자. Compose 하던 습관대로 TextField에 값을 넣고 변수에 담으면 될 것 같다.

class GreetingPage extends StatefulWidget {
  const GreetingPage({super.key});

  @override
  State<GreetingPage> createState() => _GreetingPageState();
}

class _GreetingPageState extends State<GreetingPage> {
  String name = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const TextField(), // 입력값을 어디서 받지?
        Text('안녕, $name'),
      ],
    );
  }
}

글자를 입력해도 아래 글자는 계속 안녕, 이다. TextField는 입력을 받아서 화면에 보여주긴 하는데, 그 값을 내 변수 name에 알려주는 연결이 없다. 그리고 StatefulWidget을 쓰고 있어도 setState를 부르는 곳이 없으니 화면이 다시 그려지지 않는다.

해결 1: onChanged로 값 받기

TextField(
  onChanged: (value) {
    setState(() {
      name = value;
    });
  },
),

onChanged는 글자가 바뀔 때마다 새 값을 넘겨주는 콜백이다. 3번 글에서 배운 "위로 알려주기" 패턴이고, 10번 글에서 배운 대로 화면에 보이는 값은 setState 안에서 바꾼다. 이제 입력할 때마다 아래 글자가 바뀐다.

값을 읽기만 하고 화면에 바로 반영할 필요가 없다면 setState는 필요 없다. 아래 컨트롤러 방식이 그런 경우에 맞다.

해결 2: TextEditingController로 값 읽기

class _GreetingPageState extends State<GreetingPage> {
  late final TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = TextEditingController();
  }

  @override
  void dispose() {
    controller.dispose(); // 쓴 건 정리
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: controller),
        ElevatedButton(
          onPressed: () => print('입력값: ${controller.text}'),
          child: const Text('확인'),
        ),
      ],
    );
  }
}

TextEditingController는 입력창과 연결된 손잡이다. controller.text로 지금 입력된 값을 읽고, controller.text = '홍길동'으로 값을 넣을 수도 있다. 앞서 late final을 initState에서 채우는 예시로 봤던 바로 그 패턴이고, dispose에서 controller.dispose()를 부르는 것도 빼먹으면 안 된다. 컨트롤러는 메모리를 잡고 있어서 정리하지 않으면 새어나간다.

입력창 꾸미기: InputDecoration

TextField(
  controller: controller,
  keyboardType: TextInputType.emailAddress, // 이메일용 키보드
  obscureText: false,                       // true면 비밀번호처럼 가림
  decoration: const InputDecoration(
    labelText: '이메일',
    hintText: 'test@mail.com',
    prefixIcon: Icon(Icons.email),
    border: OutlineInputBorder(),
  ),
)

decoration에 InputDecoration을 넘기면 라벨, 힌트, 아이콘, 테두리가 한꺼번에 붙는다. keyboardType은 이메일, 숫자 같은 키보드 종류를 정한다.

여러 칸 입력은 Form으로 묶는다

회원가입처럼 입력칸이 여러 개이고 "확인" 버튼에서 전부 검사하고 싶으면 칸마다 컨트롤러를 만들어 직접 검사하는 건 번거롭다. Form은 칸들을 묶어서 한 번에 검사해준다.

class _SignupPageState extends State<SignupPage> {
  final _formKey = GlobalKey<FormState>(); // Form을 가리키는 열쇠

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: const InputDecoration(labelText: '이메일'),
            validator: (value) {
              if (value == null || !value.contains('@')) {
                return '이메일 형식이 아니에요'; // 에러 메시지
              }
              return null; // null이면 통과
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                print('통과');
              }
            },
            child: const Text('가입'),
          ),
        ],
      ),
    );
  }
}

세 가지가 한 세트다.

• TextFormField: Form 안에서 쓰는 TextField. validator를 달 수 있다
• validator: 값을 받아서 에러 문구를 돌려주면 실패, null을 돌려주면 통과다
• _formKey.currentState!.validate(): 안에 있는 모든 validator를 한 번에 실행한다

validator의 규칙이 처음엔 반대로 느껴진다. 통과가 true가 아니라 **null**이다. 2번 글에서 본 null safety 그대로다. value가 String?이라서 value == null을 먼저 확인해야 하고, currentState!의 !도 "Form이 화면에 붙어 있으니 null이 아니라고 내가 보장한다"는 뜻이다.

TextField가 아닌 곳을 터치하려면: GestureDetector

Text나 Container에는 onPressed가 없다. 글자를 눌렀을 때 반응하게 하려면 GestureDetector로 감싼다.

GestureDetector(
  onTap: () => print('탭'),
  onLongPress: () => print('길게 누름'),
  onDoubleTap: () => print('두 번 탭'),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: const Center(child: Text('눌러봐')),
  ),
)

Center, Expanded와 같은 발상이다. "터치 감지"도 속성이 아니라 위젯으로 감싼다. Compose의 Modifier.clickable, SwiftUI의 .onTapGesture가 Flutter에서는 GestureDetector다.

GestureDetector는 눌렀을 때 물결 효과가 없다. 물결 효과가 필요하면 InkWell을 쓴다. 단, InkWell은 뒤에 Material 위젯이 있어야 물결이 보인다.

InkWell(
  onTap: () => print('탭'),
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('물결이 생겨요'),
  ),
)

키보드가 화면을 가릴 때

입력창이 화면 아래쪽에 있으면 키보드가 올라오면서 가린다. Scaffold는 기본으로 키보드 높이만큼 본문을 올려주는데, 입력칸이 많으면 SingleChildScrollView로 감싸서 스크롤되게 한다.

Scaffold(
  body: SingleChildScrollView(
    padding: const EdgeInsets.all(16),
    child: Form(...),
  ),
)

지난 글에서 배운 "Column은 스크롤이 안 된다"가 여기서 다시 나온다. 키보드 때문에 화면이 좁아지면 Column이 overflowed 에러를 내기 쉽다.

Compose, SwiftUI와 비교하면

// Compose
var name by remember { mutableStateOf("") }
TextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("이름") }
)

// SwiftUI
@State private var name = ""
TextField("이름", text: $name)

가장 큰 차이는 입력값을 누가 들고 있느냐다. Compose와 SwiftUI는 내 변수가 값을 들고 있고 입력창은 그걸 보여줄 뿐이다. Flutter의 TextField는 안쪽에 자기 상태를 들고 있어서, 값을 읽으려면 컨트롤러라는 손잡이를 따로 연결해야 한다.

정리

• TextField는 입력만 받을 뿐 값을 내 변수로 알려주지 않으므로, onChanged나 TextEditingController로 연결한다
• 입력 즉시 화면이 바뀌어야 하면 onChanged + setState, 버튼을 눌렀을 때 한 번 읽으면 되면 컨트롤러를 쓴다
• 컨트롤러는 initState에서 만들고 dispose에서 반드시 정리한다
• 입력칸이 여러 개이고 한 번에 검사하려면 Form + TextFormField + validator를 쓰고, 통과는 null, 실패는 에러 문구를 돌려준다
• Text나 Container에 터치 반응을 주려면 GestureDetector로 감싸고, 물결 효과가 필요하면 InkWell을 쓴다
• 키보드가 화면을 가리면 SingleChildScrollView로 감싼다

다음 글에서는 ThemeData와 Material 3 테마, 다크 모드를 다뤄보겠다.