DEV Community

Cover image for How to Use New Line Character In Text Widget Flutter?
Pankaj Das
Pankaj Das

Posted on • Originally published at flutteragency.com

How to Use New Line Character In Text Widget Flutter?

Text Widget allows you to display text in your flutter application. Sp in this article we will go through how to use newline characters in Text Widget Flutter?

Are you ready for the same?

How to Use New line Character In Text Widget Flutter?

There are multiple approaches to the same.

  • Approach 1 Using Triple quotes
child: Container(
        child :  Text('''
                         Text1
                         Text2
                         Text3''',maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )
     ),
Enter fullscreen mode Exit fullscreen mode

Approach 2 Using \n here is an example with Dynamic String:

var readLines = ['Test1', 'Test2', 'Test3'];
     String getNewLineString() {
        StringBuffer sb = new StringBuffer();
        for (String line in readLines) {
           sb.write(line + "\n");
        }
        return sb.toString();
     }


     child: Container(
        child: Text(
       getNewLineString(),
       maxLines: 20,
       style: TextStyle(
           fontSize: 16.0,
           fontWeight: FontWeight.bold,
           color: Colors.black),
     )),
Enter fullscreen mode Exit fullscreen mode
  • Approach 3 using static text.
Text('Welcome\nto\nMyWorld\nHello\nWorld\n');
Enter fullscreen mode Exit fullscreen mode

Approach 4 concate using + operator

Text('Dart ' + 'is ' + 'fun!');
Enter fullscreen mode Exit fullscreen mode
  • One other option I found is to use a RichText Widget as follows:
RichText(
  text: TextSpan(
    text: 'A line with a newline character\n',
    children: [
      TextSpan(
        text: 'A second line',
      ),
    ],
  ),
),
Enter fullscreen mode Exit fullscreen mode

Example

Scaffold(
        appBar: AppBar(title: const Text("MyApp")),
        body: Column(children: const [
          Text(
            '''
            Hello
            Flutter
            ''',
            style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.black),
          ),
          Text('Welcome\nto\nMyWorld\nHello\nWorld\n'),
          Text('Dart ' + 'is ' + 'fun!'),
        ]),
      ),
Enter fullscreen mode Exit fullscreen mode

Output

How to Use New Line Character In Text Widget

Conclusion:
Thanks for being with us !!!

In this article, we have been through how to use new line character In Text Widget Flutter?

Keep Learning !!! Keep Fluttering !!!

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 Guide, Flutter Projects, Code libs and etc.

Discussion (0)