Firebase Firestore new line command

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.

Solution 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, 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 in Flutter, if you've stored the literal two-characters \n in a string and you want to display it as a newline, 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.

Solution 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.

Solution 3

You can use the following in your html style or css:

white-space: pre-line;
line-break: anywhere;

Comments

[PJQuakJag]

Thanks @frank appreciate the help. Interesting to see that about pushing data to firestore too

[brightknight08]

i think OP is using flutter and not html/css per-se

[Dan1ell]

Thank you, from those of us using html/css and reading this question in 2021!