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

{{플러터}}

== 개요 ==
텍스트나 숫자 등을 입력하는 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 안에 속성들이 참 많다. 대표적인 것은 다음과 같다.
{| class="wikitable"
|+
!대분류
!속성
!설명
!비고
|-
|입력 관련
|
|
* controller: TextEditingController 연결''': TextEditingController 연결'''
* onChanged(String)''': 입력할 때마다 실행'''
* onSubmitted(String)''': 엔터(완료) 눌렀을 때 실행'''
* keyboardType''': 어떤 키보드 띄울지'''   '''→ <code>TextInputType.text</code>, <code>.number</code>, <code>.emailAddress</code> 등'''

* textInputAction''': 키보드의 ‘다음’, ‘완료’ 버튼 지정'''   '''→ <code>TextInputAction.done</code> 등'''
|
|-
|
|
|
|
|-
|
|
|
|
|}

*