플러터:키보드 입력

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
   2. 플러터:안드로이드 스튜디오
2. 플러터:실행
3. 플러터:개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
   6. 플러터:그래프 그리기(fl chart)
   7. 플러터:데이터 저장(간단한 데이터)
   8. 플러터:인증(Firebase 인증)(미완)
   9. 플러터:인증(OAuth2)(미완)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리(미완)
6. 플러터:DB연결
   1. 플러터:Firebase(미완)
   2. 플러터:MySQL(미완)
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
8. 플러터:배포
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:라이브러리
    1. 플러터:logger

개요

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

TextEditingController를 사용한 입력

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

단순한 예시

return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            TextField(
              onChanged: (v) {
                setState(() {
                  text = v;
                });
              },
            ),
            Text(text),
          ],
        ),
      ),
    );

TextEditingController 예시

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),
          ],
        ),
      ),
    );
  }
}

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

입력 폼 꾸미기

TextField 안에 속성들이 참 많다. 대표적인 것은 다음과 같다.

기억할 엄두도 안 날 만큼 많다. 필요한 것은 그때그때 찾아 쓰는 것이 바르리라.

속성	역할	사용 예
controller	입력값 읽고 쓰기	controller.text
onChanged	입력될 때마다 실행	onChanged: (v) { ... }
decoration	라벨, 힌트, 테두리 꾸미기	InputDecoration(hintText: ...)
keyboardType	어떤 키보드 표시할지	TextInputType.number
textInputAction	키보드 ‘완료/다음’ 설정	TextInputAction.done
obscureText	비밀번호처럼 ●●● 처리	obscureText: true
maxLines	줄 수 정의 (1줄/여러줄)	maxLines: 1
readOnly	읽기만 가능, 입력 불가	readOnly: true
autofocus	화면 열리자마자 자동 포커스	autofocus: true
inputFormatters	숫자만 허용 등 필터	FilteringTextInputFormatter.digitsOnly