How to break lines in flutter input

How to break lines in flutter input

If you're working with forms at some point you will face the need of having multiline inputs which requires to breaking lines as you input them before send and store those data into your server, today we will learn how to do that.

Lets start by defining our input value

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

Then In our Scaffold we will add text input field like this:

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

Now this will get our user inputs into userNote but does not handle line break, to give it that option we will add replaceAll() function in our http request


var response = await http.post(
    Uri.parse('https://wassiyati-mywill.com/api/userdata/mywill/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 your code

Now when you call userNote it's included your line breaks.

Explanation:

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


Will replace all \n (line breaks) with html  br tag which can be stored to database and be visible by WebView.

- Last updated 4 months ago

Be the first to leave a comment.

You must login to leave a comment