Flutter - TextField를 이용하여 로그인 페이지 구현하기(1)

로그인을 할 때 보통 사용자 Id, 비밀번호를 입력합니다.

2개의 입력 폼 UI를 구현하기 위해 TextField 를 이용해보도록 하겠습니다.

TextField 위젯을 사용하면 리플효과(터치하면 물결처럼 퍼지는 터치 효과)가 적용됩니다.

decoration 값에는 InputDecoration 위젯이 들어갑니다.

filled: 에는 TextField 의 어느 영역을 터치해야되는지 알려주기 위해 배경에 적당한 색을 입혀줍니다.

obscureText 는 비밀번호를 입력할 때 *** 로 표시되게 해줍니다.

 

SizedBox 는 여백을 주기에 적절한 위젯입니다. height 값을 적절히 설정하여 너무 붙어있지 않게합니다.

 

TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
SizedBox(height: 12.0),
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),