TextField not accept text on first click Flutter - flutter

Question

On my first page I have ListView.builder.
ListView.builder(
itemCount:_docLocatedLot.length,
itemBuilder: (context, index) => EditListTile(
model: _docLocatedLot[index], onChanged: (ItemsLocatedLot updatedModel) {
_docLocatedLot[index] = updatedModel;
},
),
)
Bellow is my source code of EditListTile, after click on edit button and click on TextField new value from keyboard not accept. After click again on TextField (second click) I can enter value in TextField.
How fix this problem?
Where is error in my code? Why I need two click to enter new value?
class EditListTile extends StatefulWidget {
final ItemsLocatedLot model;
final Function(ItemsLocatedLot listModel) onChanged;
const EditListTile({super.key, required this.model, required this.onChanged});
#override
State<EditListTile> createState() => _EditListTileState();
}
class _EditListTileState extends State<EditListTile> {
late ItemsLocatedLot model;
late bool _isEditingMode;
late TextEditingController _subTitleEditingController;
#override
void initState() {
super.initState();
model = widget.model;
_isEditingMode = false;
}
#override
Widget build(BuildContext context) {
return ListTile(
title: titleWidget,
subtitle: subTitleWidget,
trailing: tralingButton,
);
}
Widget get titleWidget {
return Text(
model.lot
);
}
Widget get subTitleWidget {
if (_isEditingMode) {
_subTitleEditingController = TextEditingController(text: model.quantity);
return TextField(
controller: _subTitleEditingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
suffix: InkWell(
onTap: () {
_subTitleEditingController.text = '';
},
child: Icon(
Icons.clear,
),
),
)
);
} else {
return Text(
model.quantity.toString();
);
}
}
Widget get tralingButton {
if (_isEditingMode) {
return IconButton(
icon: const Icon(Icons.check),
onPressed: saveChange,
);
} else {
return IconButton(
icon: const Icon(Icons.edit),
onPressed: _toggleMode,
);
}
}
void _toggleMode() {
setState(() {
_isEditingMode = !_isEditingMode;
});
}
void saveChange() {
model.quantity = _subTitleEditingController.text;
_toggleMode();
widget.onChanged(model);
}
}

Answer 1

You are using InkWell inside TextField ,So
First Click is consumed by InkWell
Second Click is consumed by TextField
Problem causing widget
TextField
|_ InkWell
TextField(
controller: _subTitleEditingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
suffix: InkWell(
onTap: () {
_subTitleEditingController.text = '';
},
child: Icon(
Icons.clear,
),
),
)
);
Solution
Replace InkWell with IconButton.
TextField(
controller: _subTitleEditingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
suffixIcon: IconButton(
onTap: () {
_subTitleEditingController.text = '';
},
child: Icon(
Icons.clear,
),
),
)
);
Output: