I have a list view and want to edit the Tile's title. When user click the edit icon, text widget change to TextField. Once user tap the textfield, keyboard show and immediately disappeared.

May I know what is the issue?

class EditableListTile extends StatefulWidget {
  final Favourite favourite;
  final Function onChanged;
  final Function onTap;
  const EditableListTile(
  {Key? key,
  required this.favourite,
  required this.onChanged,
  required this.onTap})
  : super(key: key);

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

class _EditableListTileState extends State<EditableListTile> {
  Favourite? favourite;

  late bool _isEditingMode;

  late TextEditingController _titleEditingController;

  @override
  void initState() {
    super.initState();
    favourite = widget.favourite;
    _isEditingMode = false;
  }

  @override
  Widget build(BuildContext context) {
     return ListTile(
      onTap: () {
        widget.onTap(favourite);
      },
      leading: leadingWidget,
      title: titleWidget,
      trailing: tralingButton,
    );
  }

  Widget get leadingWidget {
    return SizedBox(
      width: 32,
      child: FolderIcon(
        color: Theme.of(context).iconTheme.color!,
      ),
    );
  }

  Widget get titleWidget {
    if (_isEditingMode) {
      _titleEditingController = TextEditingController(text: favourite?.name);
      return TextField(
        controller: _titleEditingController,
      );
    } else {
      return Text(favourite!.name);
    }
  }

  Widget get tralingButton {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        (favourite?.isDefault == false)
            ? (_isEditingMode
                ? IconButton(
                    icon: const Icon(Icons.check),
                    onPressed: saveChange,
                 )
                : IconButton(
                    icon: const Icon(Icons.edit),
                    onPressed: _toggleMode,
              ))
            : Container(),
        _isEditingMode
            ? IconButton(
                icon: const Icon(Icons.cancel_outlined),
                onPressed: cancelChange,
              )
            : Container()
      ],
    );
  }

  void _toggleMode() {
    setState(() {
      _isEditingMode = !_isEditingMode;
    });
  }

  void cancelChange() {
    setState(() {
      _isEditingMode = !_isEditingMode;
    });
  }

  void saveChange() {
    favourite!.name = _titleEditingController.text;
    _toggleMode();
    widget.onChanged(favourite!);
  }
}

CodePudding user response：

you get this error because you initialized the TextEdittingController inside the titleWidget. every time the widget rebuild, create a new instance of TextEdittingController.

on top of your clas change it like this

// late TextEditingController _titleEditingController;  <== Change This
TextEditingController _titleEditingController = TextEditingController();

in titleWidget change your code to this.

Widget get titleWidget {
    if (_isEditingMode) {
      _titleEditingController.text = favourite?.name;

CodePudding user response：

Real culprit is key in ListView.seperate. I used key : UniqueKey(). If I change to ValueKey(state.favourites[index]), it is working now.

I used key : UniqueKey() because I have onDismissed but one of the item, want to trigger onDismissed but don't want to dismissed.

Let's say, item is folder name and if user delete the item, delete the folder and delete all the files under that folder. But one folder is system generated and don't want user to delete that folder but let them to delete files. So we call confirmDismiss and tell the user that it is system generated folder and only will delete files.

But list view don't allow. So I found out the UniqueKey is work around. So edit is importance. So that I take out UniqueKey.