Flutter TextField 사용법

1. TextField의 용도

TextField는 자판으로 입력하는 것들(문자열, 숫자등)을 앱상에서 받아오기 위해서 사용한다.

이 정보는 생명주기 내내 살아있으며, 그 값은 계속 읽을 수 있다. 

 

2. 기초적인 TextField 사용법

class MyPage extends StatelessWidget {
  final password_field = TextEditingController();  //입력 값 받아옴(실시간)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 50.0,), //공간
            TextField(
              decoration: InputDecoration( // 디자인 관련
                border: OutlineInputBorder(), //테두리
                labelText: 'Password', //제목짓기
              ),
              controller: password_field, //변수 값 넣기
              
            ),
          ],
        ),
      ),
    );
  }
}

다음과 같은 무난한 입력받는 박스를 만들 수 있다.

3. 추가적인 기능모음.

class MyPage extends StatelessWidget {
  final password_field = TextEditingController();
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView( //키보드 올라오면서 생기는 오류 ㅐ결
          child: Column(
            children: [
              SizedBox(height: 50.0,),
              TextField(
                cursorColor: Colors.red, //커서 색깔
                obscureText: true, // 항상보이게 하는가, 안보이게 하는가
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Password',
                ),
                controller: password_field,
              ),
              SizedBox(height:300.0),
              TextField(
                cursorColor: Colors.red,
                obscureText: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Password',
                ),
                controller: password_field,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

obscureText는 글자가 암호화되게 만들어주고

cursorColor는 커서의 색상을 변경한다

그리고 SingleChildScrollView로 키보드가 올라오면서 생기는 오류를 해결할 수 있다.