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

CodePudding user response：

Try under your Scaffold:

resizeToAvoidBottomInset: false;

and you can wrap you Column with SingleChildScrollView

CodePudding user response：

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

CodePudding user response：

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.