How to Create Multiline Text In Flutter?

• General

TextField Widget is used to get data from users and perform the desired operation. So In this article, We will go through How to Create Multiline Text In Flutter. Lots of amazing content coming up your way!!! Stay tuned 🙂

How to Create Multiline Text In Flutter?

Short Answer

All that is required for multi-line text, is that your Text() Widgets’ width is limited by a parent widget. For example:

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",
    ),
),

Long answer

Consider a code snippet like the below:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
        body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
          children: [
            Container( 
              width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
              child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
                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",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Extra

You also might face max lines. This property limits the maximum amount of lines. If this is what you want, we recommend you also play with the overflow property.

Container(
  width: 100,
  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",
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
),

Just wrap your text widget with Expanded as shown below

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

So you can try with this

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

Consider a code snippet like the 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,
          ),
        ],
      ),
    ),
  ),
)

You can use something like this as shown below:

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

So the best way to do this is:

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

Maybe try using TextField Widget like this as shown below:

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

Conclusion:

Creating multiline text in Flutter is essential for developing user-friendly and visually appealing mobile applications. At Flutter Agency, we specialize in providing detailed tutorials and expert guidance on implementing such features. As a leading mobile apps development agency, we are committed to supporting your development projects with comprehensive resources and insights. Our expertise ensures that your apps deliver exceptional user experiences and meet the highest industry standards.

Thank you for being with us on this Flutter Journey!!! Let us know what methods you have used in the past for the same.

Keep Learning !!! Keep Fluttering !!! Stay Connected !!!

Don’t forget to drop your valuable feedbacks in the comments right below!!! It keeps the enthusiasm going 🙂

Do let us know if you have doubts regarding Flutter Development!! We would love to assist you 🙂

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

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

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.