Flutter: Automatically line break inside TextEditingController when lines break in ui

Question

I am using text filed like this:

_textField = TextField(
      controller: textEditCtl,
      keyboardType: TextInputType.multiline,
      key: _textFieldKey,
      style: _textFieldStyle,
      minLines: 1,
      maxLines: 2,
    );

as you can see in my screenshot:

when line break inside text filed but actually not break-in TextEditingController. But when Enter is pressed lines broke inside TextEditingController.

Now I am gonna line be break inside TextEditingController when it's cursor goes to the next line without press Enter?

This is my complete code:

import 'package:flutter/material.dart';
import 'package:flutter_facebook_post/data.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();
  GlobalKey _textFieldKey = GlobalKey();
  TextStyle _textFieldStyle = TextStyle(fontSize: 20);
  final textEditCtl = TextEditingController();

  bool firstLoaded = true;
  String selectedUser = "";
  List<String> cities = [];
  List<String> selectedCities = [];
  late TextField _textField;

  @override
  void initState() {
    super.initState();

    /// Listen changes on your text field controller
    textEditCtl.addListener(() {
      _updateCaretOffset(textEditCtl.text);
    });
  }

  void _updateCaretOffset(String text) {
    TextPainter painter = TextPainter(
      maxLines: 2,
      textDirection: TextDirection.ltr,
      text: TextSpan(
        style: _textFieldStyle,
        text: text,
      ),
    );
    painter.layout();

    TextPosition cursorTextPosition = textEditCtl.selection.base;
    Rect caretPrototype = Rect.fromLTWH(
        0.0, 0.0, _textField.cursorWidth, _textField.cursorHeight ?? 0);
    Offset caretOffset =
        painter.getOffsetForCaret(cursorTextPosition, caretPrototype);
    TextSelection selection =
        TextSelection(baseOffset: 0, extentOffset: text.length);
    List<TextBox> boxes = painter.getBoxesForSelection(selection);
    bool max = painter.didExceedMaxLines;
    int numberOfLines = boxes.length;
    print("========> max : $max");
    print("========> text : $text");
    print("========> xCaret : ${caretOffset.dx}");
    print("========> xCaret : ${caretOffset.dx}");
    print("========> yCaret : ${caretOffset.dy}");
    print("========> numberOfLines : $numberOfLines");
    print("========> painterWidth : ${painter.width}");
    print("========> painterHeight : ${painter.height}");
    print("========> preferredLineHeight : ${painter.preferredLineHeight}");
  }

  @override
  Widget build(BuildContext context) {
    _textField = TextField(
        controller: textEditCtl,
        keyboardType: TextInputType.multiline,
        key: _textFieldKey,
        style: _textFieldStyle,
        // minLines: 1,
        maxLines: 2,
        onChanged: (String e) {
          var numLines = '\n'.allMatches(e).length + 1;
          print("========> numLines : $numLines");
        });
    return SafeArea(
      child: Scaffold(
        // appBar: AppBar(
        //   title: Text(widget.title),
        // ),
        body: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                child: _textField,
                width: double.maxFinite,
              ),
            ),
          ],
        ),
      ),
    );
  }
}