CODEWITHSUNDEEP
flutter
user20530242
user20530242

Reputation:

Bottom Overflowed by infinity pixels How to fix it

I am writing a widgets for taking input email address. But I am getting the error bottom overflowed by infinity pixels.

This is the code.

return Scaffold(
  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
          height: space_8,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(space_2),
              color: widgetBackGroundColor
          ),
          child: SizedBox(
            height: space_8,
            child: TextFormField(
              controller: controller,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                hintText: "[email protected]",
              ),
            ),
          )
      )
    ],
  ),
);

Upvotes: 0

Views: 294

Answers (3)

Kokila
Kokila

Reputation: 317

Wrap your Container with Expanded widget

return SafeArea(child:Scaffold(
  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
     Expanded(child:
       Container(
          height: space_8,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(space_2),
              color: widgetBackGroundColor
          ),
          child: SizedBox(
            height: space_8,
            child: TextFormField(
              controller: controller,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                hintText: "[email protected]",
              ),
            ),
          )
      ))
    ],
  ),
));

Upvotes: 1

Clevino Alrin
Clevino Alrin

Reputation: 356

space_8 > size.height.

Your Column children (which is the container with space_8 height) are larger than the available device height (with keyboard open or otherwise).

Consider using SingleChildScrollView (as @fotis_psarris said) if you cannot decrease the height of children.

Or else decrease height of each child or use Flexible/Expanded as per your usecase.

Upvotes: 0

Fotis Psarris
Fotis Psarris

Reputation: 100

Try under your Scaffold:

resizeToAvoidBottomInset: false;

and you can wrap you Column with SingleChildScrollView

Upvotes: 1

Related Questions