Firebase & Flutter : Line breaks? [duplicate] - firebase

Question

I'm trying to utilize a new line command to create a new line in text. It appears from this issue that this is not possible: New Line Command (\n) Not Working With Firebase Firestore Database Strings
Is this still the case? Assuming so, does Flutter offer any methods with similar functionality to the following that would allow me to work around this?
label.text = stringRecived.replacingOccurrences(of: "\n", with: "\n")
*More context:
Here is a picture of my Firestore string where I entered the data.
I then use a future builder to call this from Firestore and then pass the string (in this case comment) into another widget.
return new SocialFeedWidget(
filter: false,
articleID: document['article'],
article_header: document['article_title'],
userName: document['author'],
spectrumValue: document['spectrum_value'].toDouble(),
comment: document['comment'],
fullName: document['firstName'] + " " + document['lastName'],
user_id: document['user_id'],
postID: document.documentID,
posterID: userID,
);
}).toList(),
In the new widget, I pass it in as a string an feed it via a Text widget as follows:
new Text(
comment,
style: new TextStyle(
color: Color.fromRGBO(74, 74, 74, 1.0),
fontSize: 13.0,
),
),
When it appears, it still has the \n within the string.

Answer 1

In most programming languages if you include \n in a string, it interprets the two characters as a (escape) sequence and it actually stores a single non-printable character with ASCII code 10.
If you literally type \n into a document in the Firestore console however, it stores that exact literal value in the string. So that's two characters \ and n.
These two are not the same. In fact, if you'd want to enter the two-character sequence in a string in most programming languages you'd end up with "\\n". That's two backslashes: the first to start an escape sequence, the second to indicate it's a literal \, and then a literal n.
So if you've stored the literal two-characters \n in a string and you want to display it as a newline in your Flutter app, you need to decode the string back into a single line break character. This is luckily quite simple with:
yourString.replaceAll("\\n", "\n");
For example, this is what I just tested in an app. My document in the Firestore console shows:
And then my code:
var doc = await Firestore.instance.collection("weather").document("sf").get();
var weather = doc.data["condition"]
print(weather);
print(weather.replaceAll("\\n", "\n"));
That first print statement, prints:
Sunny\nI think
While the second prints:
Sunny
I think
Fun fact: when I run this code in Flutter:
Firestore.instance.collection("weather").document("test").setData({ 'condition': "nice\nand\nsunny" });
It shows up like this in the Firestore console:
So it looks like the unprintable \n in the string shows up as a space in the console. I haven't found a way yet to enter a newline into a string in the Firestore console. The API retrieves the line breaks correctly though, so this only affects the Firebase console.

Answer 2

Old thread I know, but for anyone that stumbles here...
If you pass \n to Firestore in a block of text you will indeed not see it if you got look for it in the Firebase console. It is still there though. All you need to do in order to get the new line to work is apply white-space: pre-wrap css to the element where the text is being rendered.

Answer 3

You can use the following in your html style or css:
white-space: pre-line;
line-break: anywhere;

Answer 4

I was able to solve this issue by wrapping the element with a parent with style props white-space: pre-line. Followed by the replaceAll() method:
<div style={{whiteSpace: 'pre-line'}}>
{(content).replaceAll(`<br />`, `\n`)}
</div>