Bottom overflowed by 182 pixels - flutter

Question

I am trying to add textfields in a widget on Flutter, and it renders correctly, but when the text is pressed to enter the data, appears the following error:
"Bottom overflowed by 182 pixels"
The error is when the default keyboard appears. I don't know why is it happening since i am wrapping everything in a SingleChildScrollView widget, therefore, should work just fine.
Attached the code:
class TextFieldsState extends State<TextFields> {
#override
Widget build(BuildContext context) {
const colorRed = Color(0xFFF0786E);
return SingleChildScrollView(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
//color: Colors.greenAccent,
height: 500,
child: Stack(
//alignment: Alignment.bottomCenter,
children: <Widget>[
Container (
height: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22.0),
color: colorRed,
),
child: Container (
height: 500,
margin: EdgeInsets.only(right: 10,),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
),
),
),
Center(
child: Positioned (
child: SizedBox(
height: 136,
//width: size.width,
child: Column(
children: <Widget>[
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Name',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Surname',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Nationality',
),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
],
),
),
);
}
}
What is the solution, please?

Answer 1

try this please
SingleChildScrollView(
column( // your column
)
)
overflow error is in column and you should add SingleChildScrollView as parent of this column.

Answer 2

Please check the edited below code.
class TextFieldsState extends State<TextFields> {
#override
Widget build(BuildContext context) {
const colorRed = Color(0xFFF0786E);
return Scaffold(
body: SingleChildScrollView(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
//color: Colors.greenAccent,
height: 500,
child: Stack(
//alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
height: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22.0),
color: colorRed,
),
child: Container(
height: 500,
margin: EdgeInsets.only(
right: 10,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
),
),
),
Center(
child: SizedBox(
height: 136,
//width: size.width,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Name',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Surname',
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 30,
width: 160,
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10.0),
),
hintText: 'Nationality',
),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
],
),
),
),
);
}
}

Answer 3

I ended up wrapping everything with a Expanded widget and the column with the Text fields I wrapped it with a SingleChilsScrollView and it worked perfectly.