Search code examples
androiddartfluttertextfield

How to expand a textField in flutter looks like a text Area


When i tap in textField in landScape mode i would like to expand in full screen likes whatsapp

enter image description here

            TextFormField(
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                  prefixIcon: Padding(
                    padding: EdgeInsets.all(0.0),
                    child: Icon(Icons.person,
                        size: 40.0, color: Colors.white),
                  ),
                  hintText: "Input your opinion",
                  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 "Empty value";
                }
              },
            )

Solution

  • All you need to do is set the maxLines variable when creating a TextField. I have added the text field inside a Card widget so you can see the total area.

    @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Simple Material App"),
          ),
          body: Column(
            children: <Widget>[
              Card(
                color: Colors.grey,
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: TextField(
                    maxLines: 8, //or null 
                    decoration: InputDecoration.collapsed(hintText: "Enter your text here"),
                  ),
                )
              )
            ],
          )
        );
      }