Using Positioned inside Stack is not working properly - flutter

Question

I am using a Stack which has Card and Positioned Elements as can be seen in the below image. These Positioned Elements contains the buttons. The issue I am facing is that the lower part of these buttons are hidden.
Also I have not given any extra margin. It might be because of Bottom Navigation Part.
image
This is the code
Stack(
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 40.0, horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
width: size.width * 0.2,
child: StreamBuilder<String>(
stream: bloc.skills,
builder: (context, snapshot) {
return TextField(
onChanged: bloc.changeSkills,
decoration: new InputDecoration(
contentPadding:
EdgeInsets.symmetric(
vertical: 0,
horizontal: 15.0),
border: new OutlineInputBorder(
borderSide:
const BorderSide(
width: 2.0,
style:
BorderStyle
.solid),
borderRadius:
BorderRadius
.circular(
50.0)),
focusedBorder:
OutlineInputBorder(
borderSide:
const BorderSide(
color:
Colors.grey,
width: 2.0),
borderRadius:
BorderRadius.circular(
50.0),
),
hintText: 'Skills',
hintStyle: new TextStyle(
color: Colors.grey,
fontWeight:
FontWeight.bold),
errorText: snapshot.error),
);
}),
),
SizedBox(height: 20.0),
Container(
width: size.width * 0.2,
child: StreamBuilder<String>(
stream: bloc.role,
builder: (context, snapshot) {
return TextField(
onChanged: bloc.changeRole,
decoration: new InputDecoration(
contentPadding:
EdgeInsets.symmetric(
vertical: 0,
horizontal: 15.0),
border: new OutlineInputBorder(
borderSide:
const BorderSide(
width: 2.0,
style:
BorderStyle
.solid),
borderRadius:
BorderRadius
.circular(
50.0)),
focusedBorder:
OutlineInputBorder(
borderSide:
const BorderSide(
color:
Colors.grey,
width: 2.0),
borderRadius:
BorderRadius.circular(
50.0),
),
hintText: 'Role',
hintStyle: new TextStyle(
color: Colors.grey,
fontWeight:
FontWeight.bold),
errorText: snapshot.error),
);
}),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: size.width * 0.2,
child: StreamBuilder<String>(
stream: bloc.language,
builder: (context, snapshot) {
return TextField(
onChanged: bloc.changeLanguage,
decoration: new InputDecoration(
contentPadding:
EdgeInsets.symmetric(
vertical: 0,
horizontal: 15.0),
border: new OutlineInputBorder(
borderSide:
const BorderSide(
width: 2.0,
style:
BorderStyle
.solid),
borderRadius:
BorderRadius
.circular(
50.0)),
focusedBorder:
OutlineInputBorder(
borderSide:
const BorderSide(
color:
Colors.grey,
width: 2.0),
borderRadius:
BorderRadius.circular(
50.0),
),
hintText: 'Language',
hintStyle: new TextStyle(
color: Colors.grey,
fontWeight:
FontWeight.bold),
errorText: snapshot.error),
);
}),
),
SizedBox(height: 20.0),
Container(
width: size.width * 0.2,
child: StreamBuilder<String>(
stream: bloc.gender,
builder: (context, snapshot) {
return DropdownButtonHideUnderline(
child:
new DropdownButtonFormField<
String>(
items: <String>[
'Female',
'Male',
'Other'
].map((String value) {
return new DropdownMenuItem<
String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: bloc.changeGender,
decoration:
new InputDecoration(
contentPadding:
EdgeInsets
.symmetric(
vertical:
0,
horizontal:
15.0),
border: new OutlineInputBorder(
borderSide:
const BorderSide(
width:
2.0,
style: BorderStyle
.solid),
borderRadius:
BorderRadius
.circular(
50.0)),
focusedBorder:
OutlineInputBorder(
borderSide:
const BorderSide(
color: Colors
.grey,
width: 2.0),
borderRadius:
BorderRadius
.circular(
50.0),
),
hintText: 'Gender',
hintStyle:
new TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.bold),
errorText:
snapshot.error),
),
);
}),
)
],
),
),
],
),
),
),
Positioned(
left: size.width * 0.02,
top: size.height * 0.58 + 2,
child: new Container(
width: 100.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
border: Border.all(
width: 2.0, color: Colors.grey)),
child: Align(
alignment: Alignment.center,
child: new Text(
'Back',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold),
),
),
)),
Positioned(
right: size.width * 0.02,
top: size.height * 0.58 + 2,
child: new Container(
width: 100.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
color: primaryColor,
// border: Border.all(width: 2.0, color: Colors.grey)
),
child: Align(
alignment: Alignment.center,
child: new Text(
'Create',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
)),
],
),

Answer 1

Add overflow: Overflow.visible, to the Stack