passcode input hideen by keyboard

Question

I created six digit passcode filed component and it is working fine as expected in bigger size emulator but when I check with small size emulator, the passcode input is hidden by keyboard.

child: TextField(
            enableInteractiveSelection: false,
            focusNode: focusNode,
            controller: widget.controller,
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
            style: const TextStyle(
              height: 0.1,
              color: Colors.transparent,
            ),
            decoration: const InputDecoration(
              focusedErrorBorder: transparentBorder,
              errorBorder: transparentBorder,
              disabledBorder: transparentBorder,
              enabledBorder: transparentBorder,
              focusedBorder: transparentBorder,
              helperStyle: TextStyle(
                color: Colors.transparent,
              ),
              fillColor: Colors.transparent,
              border: InputBorder.none,
            ),
            cursorColor: Colors.transparent,
            showCursor: false,
            maxLength: widget.maxLength,
            onChanged: _onTextChanged,
          ),

Answer 1

Can you check this package: keyboard_visibility You can get the state of your keyboard and based on that hide/show your text widgets. Consider the following code:

class _LoginPageState extends State<LoginPage> {
  bool _isKeyboardVisible = false;
  StreamSubscription _subscription;

  @override
  void initState() {
    super.initState();

    _subscription =
        KeyboardVisibilityController().onChange.listen((bool visible) {
      setState(() => _isKeyboardVisible = visible);
    });
  }

  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Visibility(
          visible: !_isKeyboardVisible,
          child: Text("Your header text"),
        ),
        Visibility(
          visible: !_isKeyboardVisible,
          child: Text("Your description text"),
        )
        TextField(
          ...
        ) // Your PIN widgets
      ]
    );
  }
}

Answer 2

Wrap the whole column within scaffold with SingleChildScrollView with property reverse: true.

Like this: