How to Create Multiline TextField In Flutter?

· 3 min read
How to Create Multiline TextField In Flutter
How to Create Multiline TextField In Flutter

When Designing and Developing a Mobile Application we may need to get a user detail that requires a huge amount of data from the user.  To get that huge amount of data users must need to display Multiline TextField. So in this article, we will go through How to Create Multiline TextField Widget In Flutter?

How to Create Multiline TextField In Flutter?

To Create Multiline TextField In Flutter make sure that the parent widget limits your Text Width and then uses Overflow and maxline. A code snippet will look like below:

Container(
  width: 150,
  child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    overflow: TextOverflow.ellipsis,
    maxLines: 5,
  ),
),

You can also try the below way:

Expanded(            
    child: Text(
      'a long text',
      overflow: TextOverflow.clip,
    ),
),

Full Example will have a code snippet like below:

Card(
  child: InkWell(
    onTap: (){},
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          SizedBox(
            height: 70, // default\minimum height
          ),
          Container(
            height: 44,
            width: 44,
            decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(22))),
          ),
          SizedBox(
            width: 15,
          ),
          Expanded(
            child: Text(
              'the very long title',
              overflow: TextOverflow.clip,
            ),
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            'value', //some other text in the end of the card or maybe an icon instead
          ),
          SizedBox(
            width: 30,
          ),
        ],
      ),
    ),
  ),
)

Don’t forget to add an overflow type.

Text(
     "TOP ADDED",
     textAlign: TextAlign.justify,
     overflow: TextOverflow.ellipsis,
     style: TextStyle(fontSize: 18.0),
     maxLines: 2,
    )

Just wrap your text widget with Expended Widget as below

Expanded(
  child: Text("data", maxLines: 4,
    overflow: TextOverflow.ellipsis,
    textDirection: TextDirection.rtl,
    textAlign: TextAlign.justify,
  ),
),

There is also an inbuilt property TextInputType like below:

new TextField(
  keyboardType: TextInputType.multiline,
  maxLines: 2,
)

The best way to handle this would look like below:

Expanded(
child: Text(document['content'],
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
maxLines: 20,
)

Conclusion:

Hope you Guys are Enjoying Our Articles !!! Drop us your valuable feedback to serve you better.

In this article, we have been through How to Multiline TextField In Flutter?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply