(Flutter) 입력 위젯

TextField

 

TextField 위젯은 사용자로부터 텍스트를 입력받기 위해 사용하는 위젯으로, 가장 많이 사용하는 위젯.

TextField는 텍스트를 입력할 때마다 데이터가 수정되어 onChanged 이벤트가 발생된다.

 

이메일 형식의 텍스트 박스

 

TextField(
    keyboardType: TextInputType.emailAddress,
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Email',
      hintText: 'you@email.com',
      icon: Icon(Icons.mail_outline),
    ),
),

 

 

 

숫자만 입력 가능한 텍스트 박스

 

TextField(
    keyboardType: TextInputType.number,
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Number',
      hintText: '12345',
      icon: Icon(Icons.calculate_outlined),
    ),
    maxLength: 8, // 최대 입력 길이
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))], // 정규식 : 숫자 0~9만 가능
),

 

 

 

 

비밀번호 입력 박스

 

비밀번호를 입력하기 위한 텍스트는 매우 중요해서 일반적으로 타인이 볼 수 없도록 '*' 로 표시되도록 설정을 한다.

 

TextField(
    keyboardType: TextInputType.visiblePassword,
    obscureText: true, // 입력 텍스트를 '*'로 표시해준다.
    controller: TextEditingController(),
    decoration: InputDecoration(
      labelText: 'Password',
      border: OutlineInputBorder(), //입력 칸에 테두리 설정
      icon: Icon(Icons.password),
    ),
    maxLength: 19, // 최대 입력 길이
    inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9]'))], // 정규식 : 숫자 0~9만 가능
),