Flutter TextEditingController does not scroll above keyboard

(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.


so simple

if your textfields is between 5-10 fields

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

Tags:

Flutter