Flutter: TextField auto add a dot when input multiple spaces

Question

I just implement a simple TextField, but when I input multiple spaces, it auto add a dot before that.

my-custom-flutter-textfield

Here is my custom TextField widget

@override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(5),
        child: Column(children: [
          Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 5),
                child: Text(
                  title,
                ),
              )),
          TextField(
              controller: _controller,
              autocorrect: false,
              decoration: InputDecoration(
                isDense: true,
                contentPadding: const EdgeInsets.all(10),
                enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    color: Colors.black,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    color: Colors.orange,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
              ))
        ]));
  }

Answer 1

This is a standard function of the iOS keyboard and most Android keyboards. I don't think you can control that from Flutter.

Answer 2

I don't think that has anything to do with the app itself, but the phone. You'd need to disable that from the phone's settings.

Although, if you really need to be able to type double spaces, here is how I'd implement it.

final TextEditingController controller = TextEditingController();
  TextSelection? cursor;
  int length = 0;
  String lastChar = '';
  String currentChar = '';

  String replaceCharAt(String oldString, int index, String newChar) {
  // function from https://stackoverflow.com/questions/52083836/how-to-replace-only-one-character-in-a-string-in-dart
    return oldString.substring(0, index) +
        newChar +
        oldString.substring(index + 1);
  }

  void removeDotOnSpace(String input) {
    //save the position of the cursor
    cursor = controller.selection;

    lastChar = currentChar;
    // if the input isn't empty and if you're not removing text
    if (input.isNotEmpty && input.length > length) {
      currentChar = input[input.length - 1];
      // if it has at least two characters, the second to last being a dot and the "lastChar" variable not being a dot
      if (input.length >= 2 &&
          input[input.length - 2] == '.' &&
          lastChar != '.') {
        // replace the dot and set state. Because setstate resests cursor position we need to save it and give it back.
        setState(() {
          controller.text = replaceCharAt(input, input.length - 2, ' ');
          controller.selection = cursor!;
        });
      }
    } else {
      currentChar = '';
      lastChar = '';
    }
    length = input.length;
  }

Put this inside a stateful widget and use it inside the onchanged function

 TextFormField(
              controller: controller,
              onChanged: (value) {
                removeDotOnSpace(value);
              },
            ),

PS: Unless it's essential for your textfields to be able to have double spaces, you should just let it be.

Answer 3

try textCapitalization: TextCapitalization.words,

Answer 4

put this function onBlur in form inputs:

const handleTrimDataAndRemoveDot = () => {
    const trimmedData = formData.trim();
    let validatedData;
    if (trimmedData.charAt(trimmedData.length - 1) === ".") {
      validatedData = trimmedData.replace(
        trimmedData.charAt(trimmedData.length - 1),
        ""
      );
    } else {
      validatedData = trimmedData;
    }
    setFormData(validatedData);
  };