플러터:키보드 입력 편집하기

{{플러터}}

== 개요 ==
텍스트나 숫자 등을 입력하는 form에 대하여.

== TextEditingController를 사용한 입력 ==
단순하게 onChanged 를 이용하여 텍스트를 다룰 수도 있지만, 일반적으로 폼처럼 사용하기 위해서 TextEditingController를 사용한다.

=== 단순한 예시 ===
<syntaxhighlight lang="dart">
return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            TextField(
              onChanged: (v) {
                setState(() {
                  text = v;
                });
              },
            ),
            Text(text),
          ],
        ),
      ),
    );
</syntaxhighlight>

=== TextEditingController 예시 ===
<syntaxhighlight lang="dart">
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      setState(() {}); // 입력될 때마다 화면 다시 그림
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            TextField(controller: controller),
            Text(controller.text),
          ],
        ),
      ),
    );
  }
}

</syntaxhighlight>추가 설명은 필요 없을 정도로 간결하다.

== 입력 폼 꾸미기 ==
TextField 안에 속성들이 참 많다. 대표적인 것은 다음과 같다.

기억할 엄두도 안 날 만큼 많다. 필요한 것은 그때그때 찾아 쓰는 것이 바르리라. https에서 사용하는 것은 물론.. 상상할 수 있는 대부분 기능이 구현 가능할 듯하다.
{| class="wikitable"
!속성
!역할
!사용 예
|-
|'''controller'''
|입력값 읽고 쓰기
|<code>controller.text</code>
|-
|'''onChanged'''
|입력될 때마다 실행
|<code>onChanged: (v) { ... }</code>
|-
|'''decoration'''
|라벨, 힌트, 테두리 꾸미기
|<code>InputDecoration(hintText: ...)</code>
|-
|'''keyboardType'''
|어떤 키보드 표시할지
|<code>TextInputType.number</code>
|-
|'''textInputAction'''
|키보드 ‘완료/다음’ 설정
|<code>TextInputAction.done</code>
|-
|'''obscureText'''
|비밀번호처럼 ●●● 처리
|<code>obscureText: true</code>
|-
|'''maxLines'''
|줄 수 정의 (1줄/여러줄)
|<code>maxLines: 1</code>
|-
|'''readOnly'''
|읽기만 가능, 입력 불가
|<code>readOnly: true</code>
|-
|'''autofocus'''
|화면 열리자마자 자동 포커스
|<code>autofocus: true</code>
|-
|'''inputFormatters'''
|숫자만 허용 등 필터
|<code>FilteringTextInputFormatter.digitsOnly</code>
|}