flutterdartsoft-keyboard

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(),
            ),
          ],
        ),
      ),
    );
  }
}

Solution

  • 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()
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }