2 Ways To Break Text Line In Flutter

Showing large chunks of text without break in app is visually unappealing. Users might feel painful to read.
Most of the users scan the content at an initial glance, if they don’t find what they want, most of the time, they will click back.

So It’s our developers’ task to make the app’s content easy to read and make it visually attractive.

This post describes two simple but effective ways to break the content.

• How To Install Flutter And Create Project?
• 7 Flutter Commands You Must Know

How To Break Text Line In Flutter? – Using New Line character

For those who don’t know new line. \n is the new line character. Using this character, we can easily make a new line.

Let’s create a simple example like above.

Text('Like\nAndroidRide\n\nShare Posts')

• When first \n added, “AndroidRide” text moved to next line.
• When \n added twice, content placed to second line.

Here is the full source code.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Line Break Example 1'),
        ),
        body: Center(
          child: Text('Like\nAndroidRide\n\nShare Posts'),
        ),
      ),
    );
  }
}

• How To Remove Debug Banner In Flutter?
• How To Center AppBar Title In Flutter?
• Check this Notes app, \n used here too.

How to break Text line using triple quotes?

In this example, you will learn how to break text line using triple quotes.

It’s another easy method, you don’t need to do anything extra. Just place your content inside the triple quotes like below.

• ”’Content”’
• Padding used to get some white space around the Text widget.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final dataString =
      '''Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  

Pretium quam vulputate dignissim suspendisse in est. Ipsum dolor sit amet consectetur adipiscing elit. Urna porttitor rhoncus dolor purus non enim praesent elementum. Arcu ac tortor dignissim convallis. Sed libero enim sed faucibus. Amet venenatis urna cursus eget. 

Aliquet porttitor lacus luctus accumsan tortor. Suscipit adipiscing bibendum est ultricies. Dolor magna eget est lorem ipsum. Ac tortor dignissim convallis aenean et tortor. 
 ''';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Line Break Example 2'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Text(dataString),
          ),
        ),
      ),
    );
  }
}

• Flutter Circle Avatar Widget Tutorial
• Flutter ImagePicket Tutorial
• Flutter Path Provider Tutorial
• How To Reduce Android App Development Time Using Genymotion Emulator?

That’s all for now. If you got any other methods, feel free to share with us.

If you like this post, please share it with your family and friends.

Thank You.

• Flutter Text Widget