when i typing in flutter textfield it type in backward direction how to solve it?

Question

I have one page of technical skill and I want to add new textfield on onatap and get the value of it and remove that skill on ontap of delete button and this is working now but only problem was that the when i am typing in textfield its typing in backward direction(right to left i want to type left to right.)

import 'package:flutter/material.dart';

class Technical extends StatefulWidget {
  const Technical({Key? key}) : super(key: key);

  @override
  State<Technical> createState() => _TechnicalState();
}

class _TechnicalState extends State<Technical> {
  List<String> skill = <String>[];
  List<TextEditingController> mycontroller = <TextEditingController>[];

  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.blue,
        title: const Text(
          'Technical Skills',
        ),
      ),
      body: Column(
        children: [
          const Align(
            alignment: Alignment.centerLeft,
            child: Text(
              'Enter Your Skills',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
          ),
          ...skill
              .map(
                (e) => Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      width: 100,
                      child: TextField(
                        enableInteractiveSelection: true,
                        controller: TextEditingController(text: e),
                        onChanged: (String value) {
                          setState(() {
                            skill[skill.indexOf(e)] = value;
                          });
                        },
                      ),
                    ),
                    IconButton(
                        onPressed: () {
                          setState(() {
                            skill.remove(e);
                            mycontroller.clear();
                            print(e);
                          });
                        },
                        icon: const Icon(Icons.delete))
                  ],
                ),
              )
              .toList(),
          Center(
            child: Text(
              '$skill',
              style: const TextStyle(fontSize: 30),
            ),
          ),
          const Spacer(),
          OutlinedButton(
            onPressed: () {
              setState(() {
                skill.add("");
              });
            },
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

Is the “backward direction” left to right or right to left? — Răzvan Puiu, Aug 27 '22 at 04:28

Md. Yeasin Sheikh · Accepted Answer · 2022-08-27T07:21:01.647

The issue is you are creating new controller on every state change, the cursor position is not handling in this.

So the solution will we

controller: TextEditingController.fromValue(
  TextEditingValue(
      text: e,
      selection: TextSelection(
        baseOffset: e.length,
        extentOffset: e.length,
      )),
),

With controller

class _TechnicalState extends State<Technical> {
  List<String> skill = <String>[];
  List<TextEditingController> mycontroller = <TextEditingController>[];

  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.blue,
        title: const Text(
          'Technical Skills',
        ),
      ),
      body: Column(
        children: [
          const Align(
            alignment: Alignment.centerLeft,
            child: Text(
              'Enter Your Skills',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
          ),
          for (int i = 0; i < mycontroller.length; i++) row_build(i),
          Center(
            child: Text(
              '$skill',
              style: const TextStyle(fontSize: 30),
            ),
          ),
          const Spacer(),
          OutlinedButton(
            onPressed: () {
              mycontroller.add(TextEditingController());
              setState(() {
                skill.add("");
              });
            },
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }

  Row row_build(int i) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 100,
          child: TextField(
            enableInteractiveSelection: true,
            controller: mycontroller[i],
            onChanged: (String value) {
              setState(() {
                skill[i] = value;
              });
            },
          ),
        ),
        IconButton(
            onPressed: () {
              setState(() {
                skill.remove(skill[i]);
                mycontroller.removeAt(i);
              });
            },
            icon: const Icon(Icons.delete))
      ],
    );
  }
}

it's working but when i trying to type its laggy and when im trying to remove text its only remove one alphabet can you check??? — Akashptl, Aug 27 '22 at 06:07
It would be better if you use `mycontroller`, and laggy because on creating multiple controller and device performance — Md. Yeasin Sheikh, Aug 27 '22 at 06:13
your updated code with mycontroller is working but when i trying to remove its remove all textfield i wnatto remove only selected one.... — Akashptl, Aug 27 '22 at 07:18
For others, it maybe better to remove `onChange` since the controller already handles the change: https://stackoverflow.com/a/59091532/11777075 — Chris King, May 07 '23 at 17:41

score 1 · Answer 2 · answered Aug 27 '22 at 04:18

1

The textfield works fine for me (left to right)

Check your code if the textDirection property is set correctly to TextDirection.ltr instead of TextDirection.rtl

child: TextField(
   textDirection: TextDirection.ltr,

answered Aug 27 '22 at 04:18

pupil gudang

91
3

where you check android ios or web??????? – Akashptl Aug 27 '22 at 04:28
in my web or android phone its backward.. – Akashptl Aug 27 '22 at 04:28
wait i post wrong code now updated check it.. – Akashptl Aug 27 '22 at 04:32

when i typing in flutter textfield it type in backward direction how to solve it?

2 Answers2