TextField with long text, horizontal scroll reset to start - Flutter

187

You can use ScrollController inside TextField and while textfiled get unfocused jump to start.

class _TOSState extends State<TOS> {
  late final FocusNode textInputFocusNode = FocusNode()
    ..addListener(() {
      debugPrint(textInputFocusNode.hasFocus.toString());
      if (!textInputFocusNode.hasFocus) {
        controller.jumpTo(0);
      }
    });
  ScrollController controller = ScrollController();

  @override
  void dispose() {
    textInputFocusNode.removeListener(() {});
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus();
      },
      child: Column(
        children: [
          TextField(
            scrollController: controller,
            focusNode: textInputFocusNode,
            maxLines: 1,
            decoration: const InputDecoration(
              hintText: "TYpe",
            ),
          ),
        ],
      ),
    ));
  }
}
Share:
187
Abhijit S
Author by

Abhijit S

Updated on January 04, 2023

Comments

  • Abhijit S
    Abhijit S over 1 year

    Building a stateful widget with a textfield wrapped within a Container of specific width. Now, when I type a long text in the textfield, the view scrolls right as you type (works as expected). But when I tap outside of the textfield, I've unfocused the textField. When I unfocus, how do I programatically reset the view of the textfield back to the beginning of the text? i.e. Move the horizontal scroll back to the beginning?

    Here's the textField widget

    textContainer = Container(
        width: MediaQuery.of(context).size.width * 0.68,
        child: Focus(
          child: TextField(
            keyboardType: TextInputType.text,
            textCapitalization: TextCapitalization.sentences,
            onSubmitted: onSubmit,
            controller: textController,
            focusNode: widget.focusNode,
            maxLines: 1,
            autofocus: widget.isNew,
            cursorColor: Colors.white,
            style: const TextStyle(
                fontSize: 16.0,
                fontFamily: 'Inter',
                fontWeight: FontWeight.normal,
                color: Colors.white
            ),
            decoration: const InputDecoration(
              border: InputBorder.none,
            ),
            onChanged: (text) {
              Task task = taskBox.get(widget.task.id);
              task.text = text;
              taskBox.put(widget.task.id, task);
            },
          ),
          onFocusChange: (hasFocus) {
            showDeleteBtn(hasFocus);
          },
        )
    );
    

    See the mid part of the gif, when I unfocus the textfield, I'd like to push the view/scroll back to the beginning of the widget. Tried rebuild the widget, but doesn't work.

    enter image description here