Flutter emoji value is reversed in controller when using rtl text direction

The issue you’re encountering with Flutter’s TextField widget is due to the behavior of text direction and how it affects the onChanged callback and the controller’s value. Here’s how you can ensure that both the displayed text and the controller’s value reflect the correct order of characters:

Problem Explanation

Text Direction and Display: Setting TextDirection.rtl correctly displays the text in right-to-left order visually, which is why "🤩hello" appears correctly as "🤩hello" in the UI.

Controller and onChanged Callback: The onChanged callback and the controller both reflect the actual text value as entered, without considering the visual order. This is because they store the raw text input without adjusting for display direction.

Solution

To ensure that both the onChanged callback and the controller’s value reflect the displayed order of text ("🤩hello"), you can manually adjust the text before setting it to the controller. Here’s how you can achieve this:

import 'package:flutter/material.dart';

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  final TextEditingController smcontroller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: null,
      onChanged: (value) {
        // Value passed here is raw input value, so adjust it before setting to controller
        String adjustedValue = adjustTextDirection(value);
        smcontroller.value = smcontroller.value.copyWith(
          text: adjustedValue,
          selection: TextSelection.collapsed(offset: adjustedValue.length),
        );
        print(smcontroller.text); // Should print "🤩hello"
      },
      autofocus: false,
      controller: smcontroller,
      textDirection: TextDirection.rtl,
      textAlignVertical: TextAlignVertical.center,
      style: const TextStyle(
        color: Color(0xffffffff),
      ),
      decoration: InputDecoration(
        hintText: "Type a message",
        hintTextDirection: TextDirection.rtl,
      ),
    );
  }

  String adjustTextDirection(String value) {
    // Ensure the displayed text is in the correct order
    if (value.isEmpty) {
      return value;
    }

    // Check if the first character is an emoji
    final firstCodeUnit = value.codeUnitAt(0);
    if (firstCodeUnit >= 0xd800 && firstCodeUnit <= 0xdbff) {
      // This is a surrogate pair, indicating an emoji
      return value;
    }

    // Reverse the text for correct display order
    return value.split('').reversed.join('');
  }

}