LaraMatic

How to Break Lines in Flutter Multiline Input

In this how to  break lines in flutter multiline inputs tutorial we have explained how we can add line breaks by just adding a small function().
While working on forms we require multiline inputs and need to break lines before storing or sending data to our server and make workflow assessing in a better way. In this tutorial we will learn that.
To do that we need to define the input value first

late String userNote = '';
final TextEditingController _userTextController = TextEditingController();

Now we will add text input field in the scaffold. See the example here:

TextFormField(
onChanged: (value) {
userNote = value;
},
maxLines: null,
maxLength: 5000,
controller: _userTextController,
keyboardType: TextInputType.multiline,
// rest of it such as styling etc.
),

The above piece of code will not handle the line break it just puts the input in userNote. To do that we have to add replaceAll() function the http request it will be able to that then.

var response = await http.post(
Uri.parse('https://laramatic.com/api/userdata/mywork/update/${args.id}'),
body: {
'note': userNote.replaceAll("\n","<br />"),
},
// Send authorization headers to the backend.
headers: {
// HttpHeaders.authorizationHeader: 'Basic your_api_token_here'
HttpHeaders.authorizationHeader: '$userToken',
HttpHeaders.acceptHeader: 'application/json'
},
);
// Rest of the code

After adding replaceAll() code of piece when we will make userNote call we see line breaks included. See we added this:

.replaceAll("\n", "<br />")

This small inclusion will surely replace all\n (line breaks) that use br tag in html will now be stored on our database and can be seen in webView easily.

That was all for adding flutter line breaks and break lines in Flutter while working with multiline inputs; replaceAll() in flutter to assess our code in a better way. Let us know in the comments for queries.