2

Here's a screen of the login page I am developing :

https://ibb.co/X22g4rc

When the keyboard shows up, it indicates me that there is an overflow, which seems to be normal :

https://ibb.co/mzVLJ4f

After some researches on the web, I found that I had to use the SingleChildScrollView widget so that when the keyboard shows up, I'd be able to scroll. From what I've seen, I had to add it within the body property of the Scaffold. That's what I did, and it works : I'm able to scroll and no more overflow error message.

BUT : The display has been cut as you can see :

https://ibb.co/rHJYqQV

Does someone know where does that come from ?

Here's my code

return Scaffold(
      body:
            SingleChildScrollView(child: 
        Container(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 150,
                ),
                Container(
                  padding: EdgeInsets.only(left: 20.0, right: 20.0),
                  child: Column(
                    children: <Widget>[
                      tabBarContainer,
                      SizedBox(
                        height: 20.0,
                      ),

                      AnimatedContainer(
                        duration: Duration(seconds: 1),
                        padding: EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0),
                        width: double.infinity,
                        height: _containerHeight,
                        decoration: cardDecoration,
                        child: TabBarView(
                          children: <Widget>[
                            LoginForm(),
                            RegisterForm(),
                          ],
                        )
                      ),

                    ],
                  ),
                )
              ],
            ),
          )
        )
        )
      );

EDIT : I also tried to add the ConstrainedBox as shown in the exemple of the api flutter website, but it didn't help me :/

user54517
  • 1,530
  • 4
  • 22
  • 33
  • suggestion: please use stackoverflow's own image uploader to imgur, personally don't trust url shortners, could be spam or worse – F-1 Jun 19 '19 at 10:36
  • Oh, sorry. I thought I couldn't upload if I had less than 10 reputation points :/ – user54517 Jun 19 '19 at 11:10

1 Answers1

4

wrap the SingleChildScrollView with an Expanded, himself wrapped within a Column.

Column(
children:<Widget>[
   Expanded(
    child:SingleChildScrollView(...)
   )
  ]
)
Murat Aslan
  • 1,271
  • 8
  • 18
  • It works, so I had to wrap the SingleChildScrollView with an Expanded, himself wrapped within a Column. Thanks ! – user54517 Jun 19 '19 at 11:11