Keyboard hides TextField in a PageView

Question

I have a quite complex screen with a page view and a FutureBuilder. In the Pagebuilder I also have a TextFormField, when I now click into the text field the keyboard opens like expected. But it then hides the textfield and a button below the text field. I already searched for solutions, things i tried:

setting resizeToAvoidBottomInset to true
putting the outer column or the pageview into a SingleChildScrollView
adding some padding (in the size of the keyboard) to the bottom

Any other ideas?

I only have ONE Scaffold.

score 0 · Answer 1 · answered May 30 '20 at 12:11

0

What approach are you using to get the keyboard size? The best approach is to add a bottom padding that pushes the textfield upwards, you might also want to put the form fields inside the SingleChildScrollView that you've mentioned:

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 10

answered May 30 '20 at 12:11

philoniare

1,625
1
13
20

Hey, thanks for your answer. But this also does not work for me. Any other ideas? – TimoBue May 30 '20 at 12:19
It might seem a strange question but have you implemented a splash screen for your app? Also, is this on android or ios, or both? – GrahamD May 30 '20 at 18:01
Yes, I have native splash screens for both ios and android. The bug (as described) appears also on ios and android (both simulated and on real devices) – TimoBue May 30 '20 at 20:49
Sorry, only just seen your reply. I had an issue on Android caused by splash but not ios. Still, have a look at this post and my answer as well as others. It may help: https://stackoverflow.com/questions/51335483/flutter-keyboard-makes-textfield-hide/56394951#56394951 – GrahamD Jun 02 '20 at 06:52

score 0 · Answer 2 · answered May 30 '20 at 12:25

Make your page scrollable and add padding to the button like so:

SingleChildScrollView(
   child: Column(
      children: 
         textInput,
         Padding(padding: ..., child: button) 
             ...

This would allow user to scroll to the button after edit.

Another solution is to make button float - it would always be above keyboard

    return Stack(
      children: <Widget>[
        Positioned(
          child: SingleChildScrollView(
              child: Column(
                  children: [textInput]
                    ..add(Container(
                      height: 1111, // button heigh, so could scroll underlapping area
                    )))),
        ),
        Positioned(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: button,
          ),
        )
      ],
    );

I tried your first solution, it does not change anything. To clearify: My main problem is that the keyboard hides the textfield. — TimoBue, May 30 '20 at 12:42

Dipesh KC · Answer 3 · 2020-05-31T09:59:09.240

Have you tried this?

You should wrap your page with SingleChildScrollView so that you get scrolling in the case when your content grows bigger than the device height because of introduction of keyboard.

Soution

1)Use of WidgetsBindingObserver mixin

2)Adding scrollController to SingleChildScrollView

3)Listening the event of presence of keyboard using didChangeMetrics and scrolling as per the need.

class _SignInState extends State<SignIn> with WidgetsBindingObserver{

ScrollController _scrollController = new ScrollController();

void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    _scrollController.jumpTo(200); //as per your need
  }

Inside Scaffold widget adding controller to SingleChildScrollView

  body: SingleChildScrollView(
        controller: _scrollController,
    )

Keyboard hides TextField in a PageView

3 Answers3