Flutter TextEditingController does not scroll above keyboard

Question

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 provi

Answer 1

This is an attempt to provide a complete answer which combines information on how to detect the focus from this StackOverflow post with information on how to scroll from Arnold Parge.

I have only been using Flutter for a couple days so this might not be the best example of how to create a page or the input widget.

The link to the gist provided in the other post also looks like a more robust solution but I haven't tried it yet. The code below definitely works in my small test project.

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override createState() => new MyPageState();
}

class MyPageState extends State<MyPage> {
  ScrollController _scroll;
  FocusNode _focus = new FocusNode();

  @override void initState() {
    super.initState();
    _scroll = new ScrollController();
    _focus.addListener(() {
      _scroll.jumpTo(-1.0);
    });
  }

  @override Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Some Page Title'),
      ),
      body: new DropdownButtonHideUnderline(
        child: new SafeArea(
          top: false,
          bottom: false,
          child: new ListView(
            controller: _scroll,
            padding: const EdgeInsets.all(16.0),
            children: <Widget>[

              // ... several other input widgets which force the TextField lower down the page ...

              new TextField(
                decoration: const InputDecoration(labelText: 'The label'),
                focusNode: _focus,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

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.

Answer 3

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.

Answer 4

so simple

if your textfields is between 5-10 fields

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