Flutter: Scroll the screen up when keyboard appears

user_10555787 0
Viewed 2116

I am trying to build a login screen which contains phone number field on top along with an image and login button at the bottom, as soon as I clicked on the phone number field keyboard rises but my 'login button' hides behind the keyboard, I have used "SingleChildScrollView" so as when the keyboard rises the page becomes scrollable but login button does not appear on the top of the keyboard.

Here is the snippet of the code:

return Scaffold(
  backgroundColor: white.color,
  body: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
                  Container(
                        child: Text(
                          'Enter your mobile number',
                          style: TextStyle(
                            fontSize: headSize.fontSize,
                            fontWeight: FontWeight.w400,
                            color: black.color,
                            fontFamily: 'ProductSans',
                          ),
                        ),
                      ),
                      Container(
                        height: screenHeight / 15,
                        child: Center(
                          child: SizedBox(
                            height: screenHeight / 6,
                            width: double.infinity,
                            child: RaisedButton(
                              color: indigo.color,
                              shape: borderRadius,
                              child: Text(
                                "Continue",
....
dart flutter
2 Answers

I can give you a hint as your code is kinda hard to understand, you can use MediaQuery.of(context).viewInsets.bottom. Now the question is what it does and how will it help me.

  1. What it does: It will provide the bottom padding which should be avoided(basically padding taken by system UI in your case keyboard is taking space) by the developer as it is an inherited widget so it will build itself as soon as you open the keyboard.

2.How can I use: you can create an empty container or sized box at the bottom of the column and set its height=MediaQuery.of(context).viewInsets.bottom and wrap your column in a single child scroll view.

user_70260120

Try replacing with screenHeight / 15 and screenHeight / 6 with for example 100 and check the result. 

Container(
          height: screenHeight / 15,
          child: Center(
            child: SizedBox(
              height: screenHeight / 6,
              width: double.infinity,
              child: RaisedButton(
                color: indigo.color,
                shape: borderRadius,
                child: Text(
                  "Continue",

By the way you are setting the height of the parent to be smaller than the child. I wonder why? :)

For example, if screenHeight = 100

100/15 = 6.6 parent

100/6 = 16.6 child

user_135543520
Related