본문 바로가기
개발/플러터

[플러터] TextField 에 대하여

by 핸디(Handy) 2020. 5. 7.

 TextField 는 글자를 입력받는 위젯입니다.

<전체코드>

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('TextField Sample'),
        ),
        body: ListView(
          scrollDirection: Axis.vertical,
          padding: const EdgeInsets.all(10.0),
          children: <Widget>[
            TextField(
            decoration: InputDecoration(
              labelText: '기본 design',
            ),
          ),
            TextField(
              decoration: InputDecoration(
                labelText: '머터리얼 design',
                border: OutlineInputBorder(),
              ),
            )
          ],
        )
    );
  }
}

TextField 의 InputDecoration 클래스로 OutlijneInputBorder()를 지정하면 머티리얼 디자인을 구현할 수 있습니다.

labalText : text가 입력되기 전까지 표시되는 hint text입니다.

댓글