When I start typing in textField it overflow flutter

Question

Hello, I'm designing a login Screen in flutter and I want to allow the user to type the username and the password in a TextFile widget but everytime I try to do that the keyboard pop up and overflow the whole application with that ugly black and yellow squares, how can i overcome that?

I'm running the Application on a physical device if that will make any difference

Widget build(BuildContext context) {
return Scaffold(
  body: SingleChildScrollView(
    child: SafeArea(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(0, 15.0, 10.0, 0),
            width: double.infinity,
            child: GestureDetector(
              onTap: () {
                return Navigator.push(context,
                    MaterialPageRoute(builder: (context) => LoginPage()));
              },
              child: Container(
                child: Text(
                  'Skip',
                  textAlign: TextAlign.right,
                  style: TextStyle(fontSize: 15.0, color: Colors.grey),
                ),
              ),
            ),
          ),
          Container(
            child: CarouselSlider(
              carouselController: buttonCarouselController,
              options: CarouselOptions(
                enableInfiniteScroll: false,
                viewportFraction: 1.0,
                height: 400.0,
              ),
              items: [
                TheCarouselBuilder(1, 'Learn anytime \nand anywhere '),
                TheCarouselBuilder(2, 'Find a course \nfor you '),
                TheCarouselBuilder(3, 'Improve your skills'),
              ],
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.08,
          ),
          GestureDetector(
            onTap: () =>moveToNextPage(),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: MediaQuery.of(context).size.height * 0.1,
              decoration: BoxDecoration(
                color: Color(0xffE3562A),
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Center(
                child: Text(
                  buttonString,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 20.0,
          )
        ],
      ),
    ),
  ),
);

}

score 1 · Answer 1 · answered Feb 15 '21 at 20:19

In your Scaffold set these values:

resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: false,

The full code:

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomPadding: false,
  resizeToAvoidBottomInset: false,
  body: SingleChildScrollView(
    child: SafeArea(
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(0, 15.0, 10.0, 0),
            width: double.infinity,
            child: GestureDetector(
              onTap: () {
                return Navigator.push(context,
                    MaterialPageRoute(builder: (context) => LoginPage()));
              },
              child: Container(
                child: Text(
                  'Skip',
                  textAlign: TextAlign.right,
                  style: TextStyle(fontSize: 15.0, color: Colors.grey),
                ),
              ),
            ),
          ),
          Container(
            child: CarouselSlider(
              carouselController: buttonCarouselController,
              options: CarouselOptions(
                enableInfiniteScroll: false,
                viewportFraction: 1.0,
                height: 400.0,
              ),
              items: [
                TheCarouselBuilder(1, 'Learn anytime \nand anywhere '),
                TheCarouselBuilder(2, 'Find a course \nfor you '),
                TheCarouselBuilder(3, 'Improve your skills'),
              ],
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.08,
          ),
          GestureDetector(
            onTap: () =>moveToNextPage(),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: MediaQuery.of(context).size.height * 0.1,
              decoration: BoxDecoration(
                color: Color(0xffE3562A),
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Center(
                child: Text(
                  buttonString,
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 20.0,
          )
        ],
      ),
    ),
  ),
);
}

If you search for a solution without asking here, you can find out more about that, for example:
This is stack overflow question about how to solve this problem.

And here are some video tutorials to fix that.

When I start typing in textField it overflow flutter

1 Answers1