[Flutter/TextField] keyboardType, 입력값 필터(inputFormatters)

✍ TextField (keyboardType, inputFormatters)

TextField 에서 입력받을 텍스트의 타입을 keyboardType 으로 정할 수 있고 inputFormatters 에 설정된 타입 외의 입력값을 입력하면 거부된다. keyboardType 으로 핸드폰의 키보드가 올라오는 것의 종류를 정할 수 있는데 블루투스로 연결한 키보드 사용 시, 원하지 않는 타입의 텍스트를 입력하는 것을 inputFormatters 가 방지해 준다.

 

 

😶 keyboardType

 

• TextInputType.none : 키보드가 올라오지 않는다.
• TextInputType.visiblePassword
• TextInputType.url
• TextInputType.streetAdress
• TextInputType.phone
• TextInputType.datetime
• TextInputType.number
• TextInputType.text
• TextInputType.emailAddress
• TextInputType.multiline

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: SafeArea(child: _HomeScreen()),
        ),
      ),
    );

class _HomeScreen extends StatelessWidget {
  _HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        TextField(keyboardType: TextInputType.none, decoration: InputDecoration(hintText: "name")),
        TextField(keyboardType: TextInputType.visiblePassword, decoration: InputDecoration(hintText: "visiblePassword")),
        TextField(keyboardType: TextInputType.url, decoration: InputDecoration(hintText: "url")),
        TextField(keyboardType: TextInputType.streetAddress, decoration: InputDecoration(hintText: "streetAddress")),
        TextField(keyboardType: TextInputType.phone, decoration: InputDecoration(hintText: "phone")),
        TextField(keyboardType: TextInputType.datetime, decoration: InputDecoration(hintText: "datetime")),
        TextField(keyboardType: TextInputType.number, decoration: InputDecoration(hintText: "number")),
        TextField(keyboardType: TextInputType.emailAddress, decoration: InputDecoration(hintText: "emailAddress")),
        TextField(keyboardType: TextInputType.text, decoration: InputDecoration(hintText: "text")),
        TextField(keyboardType: TextInputType.multiline, decoration: InputDecoration(hintText: "multiline")),
        TextField(keyboardType: TextInputType.none, decoration: InputDecoration(hintText: "none")),
      ],
    );
  }
}

 

keyboardType 예시

 

 

😶 inputFormatters

입력값을 필터링하고 싶을 때 사용한다. 리스트로 되어있어서 여러 개의 필터도 가능하다. 리스트에 사용 가능한 값 몇 개를 소개하면 다음과 같다.

// 길이가 maxLength 일때까지만 입력 가능
LengthLimitingTextInputFormatter(int? maxLength)

// 한줄만 허용
FilteringTextInputFormatter.singleLineFormatter

// 숫자만 허용
FilteringTextInputFormatter.digitsOnly

// 임의의 패턴 거부 : "bbbbbb" 는 "금지단어"로 대체됨
FilteringTextInputFormatter.deny("bbbbbb", replacementString: "금지단어")

// 임의의 패턴 거부 : "bbbbbb" 단어는 거부됨(지워짐)
FilteringTextInputFormatter.deny("bbbbbb")

 

예시)  "apple" 단어는 "banana" 로 대체하고, 길이는 10자까지 가능한 필터

TextField(
  keyboardType: TextInputType.text,
  inputFormatters: [
    FilteringTextInputFormatter.deny("apple", replacementString: "banana"),
    LengthLimitingTextInputFormatter(10)
  ],
)