16. 플러터 : 텍스트 입력

사용자로부터의 입력은 늘 액션을 동반하기 때문에 좀더 어렵다.
그래도 플러터라서 아이폰과 안드로이드에 비해서는 훨씬 쉽다.
다만 새로운 것을 익혀야 하는 것이 번거롭지만
해야 하기 때문에 하는 거라고 생각하자. 하지 않을 수 있는 방법이 없다.

TextField 클래스를 사용해서 입력 필드를 만들고
입력하는 글자를 아래쪽의 Text 위젯에 출력하는 코드를 구성했다.
키보드는 입력 초점이 TextField 위젯에 가면 자동으로 올라오니까 신경쓰지 않아도 된다.
입력 초점을 잃으면 자동으로 내려가는 것까지 포함된다.

버튼은 상태를 갖지 않는 StatelessWidget 클래스 계열이고
텍스트 필드와 같은 값이 바뀔 수 있는 것들은 StatefulWidget 클래스 계열이다.
StatefulWidget 클래스를 사용하기 때문에 State<> 클래스를 상속한 클래스까지 조금 번거로운 느낌이 든다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '텍스트 입력',
        home: Scaffold(
            appBar: AppBar(title: Text('텍스트 입력'),),
            body: InputSample(),
        ),
    ));
}

class InputSample extends StatefulWidget {
    @override
    State createState() => InputSampleState();
}

class InputSampleState extends State<InputSample> {
    String inputs = '';
    
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Column(
                children: <Widget>[
                    Container(
                        child: TextField(
                            style: TextStyle(fontSize: 32, color: Colors.red),
                            textAlign: TextAlign.center,
                            decoration: InputDecoration(hintText: '입력해 주세요'),
                            onChanged: (String str) {
                                setState(() => inputs = str);
                            },
                        ),
                        padding: EdgeInsets.only(top: 10, bottom: 10),
                        width: 300,
                    ),
                    Container(
                        child: Text(
                            inputs,
                            style: TextStyle(fontSize: 32),
                            textAlign: TextAlign.center,
                        ),
                        padding: EdgeInsets.only(top: 10, bottom: 10),
                        width: 300,
                    ),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
            ),
        );
    }
}

첫 번째 줄에 만든 Inputs 변수가 위젯들의 상태를 결정한다.
상태를 결정한다는 것은 위젯이 보여주려고 하는 상태(문자열)를 담고 있다는 뜻이다.
때문에 항상 동기화가 되어야 한다.
inputs 변수의 값과 위젯의 값이 다르면 사용자는 엄청난 혼란에 빠지게 되니까.

TextField 클래스의 옵션에 특별한 것이 일부 있다.
InputDecoration 클래스를 통해 입력해야 할 내용을 설명할 수 있고
입력한 내용이 바뀔 때마다 자동으로 호출되는 onChanged 매개변수가 있다.
자동으로 build 함수를 호출해서 매번 재구성해야 하기 때문에 세터(setState) 호출은 필수다.