CODEWITHSUNDEEP
flutterdartsoft-keyboard
Thorvald
Thorvald

Reputation: 3563

Make soft keyboard overlaps other widgets - Flutter

How to make soft keyboard covers/overlaps other widgets instead of pushing them up which causes the UI to go crazy and pixels overflow?

I tried with and without Stack()

I tried with and without resizeToAvoidBottomInset: false,

But still no result!

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: <Widget>[
            ClipPath(
              clipper: CustomBackgroundClipper(),
              child: Container(
                height: 220.0,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      gradientStart, 
                      gradientEnd
                    ],
                  ),
                ),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              child: HomeTopContainer(),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 2

Views: 1757

Answers (3)

Milind Gour
Milind Gour

Reputation: 131

Just add this in Scaffold : resizeToAvoidBottomInset: false,

Upvotes: 4

Inchy
Inchy

Reputation: 9

I would suggest removing the Align widget completely and adding mainAxisAlignment and crossAxisAlignment properties to your Column widget.

Upvotes: 0

Sergio Bernal
Sergio Bernal

Reputation: 2327

I don´t know what is inside your HomeTopContainer, but like this way, its working to me:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: <Widget>[
          ClipPath(
            child: Container(
              height: 220.0,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.green, Colors.blue],
                ),
              ),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                children: <Widget>[
                  Spacer(),
                  Container(
                    height: 30,
                    color: Colors.red,
                  ),
                  TextField()
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 1

Related Questions