Flutter TextEditingController does not scroll above keyboard

user_2318281 0
Viewed 20794

In android version, Flutter TextEditingController does not scroll above keyboard like default text fields do when you start typing in field. I tried to look in sample apps provided in flutter example directory, but even there are no example of TextEditController with such behaviour.

Is there any way to implement this.

Thanks in advance.

flutter
5 Answers

so simple

if your textfields is between 5-10 fields

 SingleChildScrollView(
     reverse: true,  // add this line in scroll view
     child:  ...
)
user_92808480

(August 20, 2021 Flutter 2.2.3)

I think my answer might be the cleanest solution for this problem:

@override
Widget build(BuildContext context) {
  /// Get the [BuildContext] of the currently-focused
  /// input field anywhere in the entire widget tree.
  final focusedCtx = FocusManager.instance.primaryFocus!.context;

  /// If u call [ensureVisible] while the keyboard is moving up
  /// (the keyboard's display animation does not yet finish), this
  /// will not work. U have to wait for the keyboard to be fully visible
  Future.delayed(const Duration(milliseconds: 400))
      .then((_) => Scrollable.ensureVisible(
            focusedCtx!,
            duration: const Duration(milliseconds: 200),
            curve: Curves.easeIn,
          ));
  /// [return] a [Column] of [TextField]s here...
}

Every time the keyboard kicks in or disappears, the Flutter framework will automatically call the build() method for u. U can try to place a breakpoint in the IDE to figure out this behavior yourself.

Future.delayed() will first immediately return a pending Future that will complete successfully after 400 milliseconds. Whenever the Dart runtime see a Future, it will enter a non-blocking I/O time (= inactive time = async time = pending time, meaning that the CPU is idle waiting for something to complete). While Dart runtime is waiting for this Future to complete, it will proceed to the lines of code below to build a column of text fields. And when the Future is complete, it will immediately jump back to the line of code of this Future and execute .then() method.

More about asynchronous programming from this simple visualization about non-blocking I/O and from the Flutter team.

user_81385910

Flutter does not have such thing by default.

Add your TextField in a ListView. create ScrollController and assign it to the ListView's controller.

When you select the TextField, scroll the ListView using:

controller.jumpTo(value);

or if you wish to to have scrolling animation:

controller.animateTo(offset, duration: null, curve: null);

EDIT: Of course the duration and curve won't be null. I just copied and pasted it here.

user_20089620

Thank you all for the helpful answers @user2785693 pointed in the right direction.
I found complete working solution here: here

Issue with just using scroll or focusNode.listner is, it was working only if I focus on textbox for the first time, but if I minimize the keyboard and again click on same text box which already had focus, the listner callback was not firing, so the auto scroll code was not running. Solution was to add "WidgetsBindingObserver" to state class and override "didChangeMetrics" function.

Hope this helps others to make Flutter forms more user friendly.

user_23182810
Related