본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 textField를 확장하는 방법은 텍스트 영역처럼 보입니다., How to expand a textField in flutter looks like a text Area

by 베타코드 2023. 12. 11.
반응형

질문


테스트 필드를 랜드스케이프 모드에서 탭하면 화면이 완전히 확장되어 WhatsApp과 같은 방식으로 표시됩니다.

이미지 설명 입력

            TextFormField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: EdgeInsets.all(0.0),
                    child: Icon(Icons.person,
                        size: 40.0, color: Colors.white),
                  ),
                  hintText: "의견을 입력하세요",
                  hintStyle: TextStyle(color: Colors.white30),
                  border: OutlineInputBorder(
                      borderRadius:
                      BorderRadius.all(new Radius.circular(25.0))),
                  labelStyle: TextStyle(color: Colors.white)),
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 25.0,
              ),
              controller: host,
              validator: (value) {
                if (value.isEmpty) {
                  return "값이 비어 있습니다";
                }
              },
            )

답변


할 일은 TextField를 생성할 때 maxLines 변수를 설정하는 것뿐입니다. 전체 영역을 볼 수 있도록 Card 위젯 안에 텍스트 필드를 추가했습니다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("간단한 머티리얼 앱"),
      ),
      body: Column(
        children: <Widget>[
          Card(
            color: Colors.grey,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: TextField(
                maxLines: 8, // 또는 null 
                decoration: InputDecoration.collapsed(hintText: "여기에 텍스트를 입력하세요"),
              ),
            )
          )
        ],
      )
    );
  }
반응형

댓글