Overscroll value has no effect when manually focusing on element after the first time

[yosikal]

I set overscroll to 150. First time focusing on TextField the field indeed is scrolled correctly per the overscroll value. However, after doing that, if I focus manually (tapping) on the next text field, nothing happens.

[diegoveloper]

Can you attach a video/gif + minimum code sample ?

[yosikal]

Sure, here is a video. Please note that I move between the fields by tapping them and not by using the arrows.

https://user-images.githubusercontent.com/5467649/103417042-ca38e700-4b91-11eb-9398-ab75664e97ee.MP4

Also, code sample that demonstrates the issue:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';

class TestScreen extends StatefulWidget {
  TestScreen({Key key}) : super(key: key);

  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final FocusNode _nodeText1 = FocusNode();
  final FocusNode _nodeText2 = FocusNode();
  final FocusNode _nodeText3 = FocusNode();

  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.grey[200],
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
        ),
        KeyboardActionsItem(
          focusNode: _nodeText2,
        ),
        KeyboardActionsItem(
          focusNode: _nodeText3,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      resizeToAvoidBottomInset: false,
        child: KeyboardActions(
          overscroll: 150,
      config: _buildConfig(context),
      child: Container(
        child: Padding(
          padding: const EdgeInsets.only(left: 20, right: 20),
          child: Form(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                SizedBox(
                  height: 500,
                  width: 200,
                ),
                TextFormField(
                  keyboardType: TextInputType.text,
                  focusNode: _nodeText1,
                  decoration: InputDecoration(
                    hintText: "Input Number",
                  ),
                ),
                TextFormField(
                  keyboardType: TextInputType.text,
                  focusNode: _nodeText2,
                  decoration: InputDecoration(
                    hintText: "Input Text with Custom Done Button",
                  ),
                ),
                TextFormField(
                  keyboardType: TextInputType.text,
                  focusNode: _nodeText3,
                  decoration: InputDecoration(
                    hintText: "Input Number with Custom Action",
                  ),
                ),
                SizedBox(
                  height: 1000,
                  width: 200,
                ),
              ],
            ),
          ),
        ),
      ),
    ));
  }
}

[diegoveloper]

hmm but you don't need overscroll there since you have enough space to see the textfield.

[yosikal]

I was hoping to get user experience like Booking.com or Airbnb have in their checkout forms. It's very useful from the user perspective to be able to see and tap on the next field.

[BenjiFarquhar]

@diegoveloper For some reason overscroll is just detecting the error message and sizing correctly to that. It is actually fine behaviour, just unexpected as the argument is a custom double.