Text field not taking values immediately after 1 tap in flutter. What is the problem?-CodePudding

So I have auto-calculated text fields in flutter. Here it's code:

enum UnitType {
  meter,
  centimeter,
  feet,
}

class Units extends StatelessWidget {
  Units({Key? key}) : super(key: key);
  final TextEditingController _feetController =
      TextEditingController(text: '0');
  final TextEditingController _centimeterController =
      TextEditingController(text: '0');
  final TextEditingController _meterController =
      TextEditingController(text: '0');

  void _convertUnit(UnitType type) {
    double? ft = double.tryParse(_feetController.value.text) ?? 0;
    double? cm = double.tryParse(_centimeterController.value.text) ?? 0;
    double? m = double.tryParse(_meterController.value.text) ?? 0;

    switch (type) {
      case UnitType.feet:
        _meterController.text = (ft / 3.281).toStringAsFixed(2);
        _centimeterController.text = (ft * 30.48).toStringAsFixed(2);
        break;
      case UnitType.meter:
        _centimeterController.text = (m * 100).toStringAsFixed(2);
        _feetController.text = (m * 3.281).toStringAsFixed(2);
        break;
      case UnitType.centimeter:
        _meterController.text = (cm / 100).toStringAsFixed(2);
        _feetController.text = (cm / 30.48).toStringAsFixed(2);
        break;
    }
  }

I am having a problem though, I cannot immediately start putting values in the text fields, I need to press twice and then delete the Zeros '0', and then I can put some values. After a single tap it's not taking any input. What possibly can the problem be?

Here's a code of a TextFormFeild:

@override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          NeumorphicText(
            "Feet",
            style: NeumorphicStyle(
              color: HexColor("fcba03"),
              intensity: 0.9,
              depth: 0.5,
            ),
            textStyle: NeumorphicTextStyle(
              fontSize: MediaQuery.of(context).size.height / 31,
              fontFamily: GoogleFonts.trykker().fontFamily,
            ),
          ),
          Neumorphic(
            style: NeumorphicStyle(
              color: HexColor("E19D4D"),
              depth: -3,
            ),
            child: SizedBox(
              width: MediaQuery.of(context).size.width / 2,
              child: TextFormField(
                textAlign: TextAlign.center,
                style: GoogleFonts.tauri(
                  fontWeight: FontWeight.bold,
                  fontSize: MediaQuery.of(context).size.height / 30,
                  color: Colors.white,
                ),
                controller: _feetController,
                keyboardType: TextInputType.number,
                onChanged: (_) => _convertUnit(UnitType.feet),
                decoration: const InputDecoration(
                  border: InputBorder.none,
                ),
                inputFormatters: [
                  LengthLimitingTextInputFormatter(5),
                ],
              ),
            ),
          ),

CodePudding user response：

The issue comes from TextEditingController while it contains initial value 0. You can simply remove this.

final TextEditingController _feetController = TextEditingController();
final TextEditingController _centimeterController = TextEditingController();
final TextEditingController _meterController = TextEditingController();

Instead you can use hintText on decoration.

 decoration: const InputDecoration(
            border: InputBorder.none,
            hintText: "0",
            hintStyle:TextStyle()// the way you like
          ),

CodePudding user response：

The problem simply lies here. I was using a stateless widget. For using such type of auto-calculated text fields, or basically TextEditingController() it's preferable to use statefull widget.

To resolve the problem simple replace these lines:

class Units extends StatelessWidget {
  Units({Key? key}) : super(key: key);
}

with these:

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

  @override
  State<Units> createState() => _UnitsState();
}

And there you go- PROBLEM SOLVED!

Just check all the brackets before celebrating.