How to display multiline text in Flutter?
Text("Text1\n Text2\n Text3",maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )
Add a comment
|
7 Answers
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 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 with \n
Text('Welcome\nto\nMyWorld\nHello\nWorld\n');
For more, you should refer to this link https://api.dartlang.org/stable/2.5.0/dart-core/String-class.html
7 Comments
Atmaram
Thanks @Amit Prajapati, Do you know how to achieve the same if the text is taken from a server response. With local text in the above format is working fine.
Amit Prajapati
Can you post here what response string you have and how you want to show like ?
Amit Prajapati
You might have to replace space with \n
Atmaram
I have mentioned the same (\n) in my question .. which is not working
Atmaram
with new line chars from server is not working but I modified it again locally to put newline char wherever needed , its working now . Thanks.
|
For me, when getting data with '\n' in the text from the local sqlite database, this worked:
var message = await db.getDataFromDB();
return Text(message.replaceAll('\\n', '\n'))
1 Comment
ege men
This worked for data from db, api, remote server.. ;) thx..
If you want to break line with a string that comes from outside the Flutter you should modify the string inside flutter.
So if you get from API a string 'Order received! \n Wait in the line!' and the break line is not working, in flutter you should replace the '\n' inside flutter
var response = await getMessageFromServer();
String message = getMessage(response);
return Text(message.replaceAll('\n', '\n'))
This way you will see how the color of '\n' is different in flutter.
I prefered using '/n' for the API and then in flutter I replace.all('/n', '\n')
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',
),
],
),
),
Comments
Just use this
Text('${userInfo.name}'
'\n${userInfo.email}'
'\n${userInfo.mobilenumber}',maxLines: 20, style: TextStyle(fontSize: 16.0 ,fontWeight:FontWeight.bold,color: Colors.black) , )
Comments
You can write multiple lines of text in the Text() widget by simply enclose every line of text with a separate quote(" ").
Like this, look at the screenshot.
Comments
If you are getting any String from APIs, Firebase, etc having '\n' in it. You can follow the below step:
String data = dataFromAPI(); //For eg. it returns "How are you?\nI am good!"
String newData = data.replaceAll('\\n', '\n');
Here, if you display the newData anywhere, it will have new lines added. This works for any data you might be receiving from external to flutter.
