How to Use New Line Character In Text Widget?

· 2 min read
How to Use New line Character In Text Widget Flutter
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) , )
         ),
  • 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),
         )),
    
    
  • Approach 3 using static text.
    Text('Welcome\nto\nMyWorld\nHello\nWorld\n');
  • Approach 4 concate using + operator
    Text('Dart ' + 'is ' + 'fun!');
  • 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',
          ),
        ],
      ),
    ),
  • 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!'),
        ]),
      ),

Output

How to Use New line Character In Text Widget Flutter

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 GuideFlutter ProjectsCode libs and etc.

Leave a Reply