Preserving TextField Input After Keyboard Dismissal in Flutter

43 views Asked by At

I am developing a Flutter application and encountering an issue with a TextField widget. My goal is to allow users to enter an address query into the TextField. However, I've noticed that once the keyboard is dismissed, the entered query is reset and no longer visible on the screen, preventing the user from selecting it.

I attempted to manage the focus state to preserve the query text upon closing the keyboard but have been unsuccessful. Below is a snippet of my code involving the TextField and its focus management:

class _LocationTextfieldState extends State<LocationTextfield> {
  bool isFocused = false;
  final focusNode = FocusNode();
  late TextEditingController _controller;
  String? value;

  @override
  void initState() {
    super.initState();
    value = widget.initialValue?.address;
    isFocused = widget.isFocused ?? false;
    _controller = TextEditingController(text: widget.initialValue?.address);
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        widget.onFocused();
      }
      setState(() {
        isFocused = focusNode.hasFocus;
      });
    });
    if (isFocused) {
      focusNode.requestFocus();
    }
  }

Excerpt from the code that calls focus:

children: [
                Text(
                  labelText(context),
                  style: context.bodySmall?.copyWith(
                    color: labelColor(context),
                  ),
                ),
                TextFormField(
                  onChanged: (newValue) {
                    widget.onChanged(newValue);
                    setState(() {
                      value = newValue;
                    });
                  },
                  focusNode: focusNode,
                  controller: _controller,
                  decoration: InputDecoration(
                    isCollapsed: true,
                    hintText: hintText(context),
                    suffix: Transform.translate(
                      offset: const Offset(0, -8),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          if ((value?.isNotEmpty ?? false) ||
                              (widget.index != 0 && widget.index != (widget.totalCount - 1)))
                            CupertinoButton(
                              minSize: 0,
                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                              onPressed: () {
                                if (_controller.text.isEmpty &&
                                    widget.index != 0 &&
                                    widget.index != widget.totalCount - 1) {
                                  widget.onRemoveStop();
                                  return;
                                }
                                _controller.clear();
                                widget.onChanged(null);
                              },
                              child: const Icon(
                                Ionicons.close_circle,
                                size: 18,
                                color: ColorPalette.neutralVariant80,
                              ),
                            ),

My question is: How can I modify the focus handling or implement another solution to ensure that the query remains visible for user selection after the keyboard has been dismissed?

0

There are 0 answers