CODEWITHSUNDEEP
flutterdart
Salvatore
Salvatore

Reputation: 65

Flutter: Scroll the screen up when keyboard appears

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",
....

Upvotes: 3

Views: 4117

Answers (3)

VolcanoCoder
VolcanoCoder

Reputation: 733

I have also encountered the same problem. Setting MaterialApp as parent and main widget solved this problem for me.

Upvotes: 0

VasilKanev
VasilKanev

Reputation: 1562

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

Upvotes: 0

UTKARSH Sharma
UTKARSH Sharma

Reputation: 836

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.

Upvotes: 3

Related Questions