onPress not working inside of Postioned widget in flutter - flutter

Question

Im trying to put some buttons and ListView inside of Stack with Postioined parameters.
All looks fine until i try to click on right arrow icon button to go close the page.
Its height and width are 48px (which has to be more than enought to click on it) but for some reason onPressed is working like its size is 2px.
How i could fix this issue?
Here is the code:
import 'package:flutter/material.dart';
class MobilePortraitProfile extends StatefulWidget {
#override
State<MobilePortraitProfile> createState() => _MobilePortraitProfileState();
}
class _MobilePortraitProfileState extends State<MobilePortraitProfile> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
left: 10,
top: 40,
right: 50,
bottom: 670,
child: Text(
'Account Info',
style: TextStyle(color: Colors.white, fontSize: 28),
),
),
Positioned(
left: 295,
right: 3,
top: 27,
bottom: 660,
child: Container(
margin: EdgeInsets.all(6.5),
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(100)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color.fromRGBO(10, 196, 186, 1),
Color.fromRGBO(33, 211, 155, 1)
]),
),
),
),
Positioned(
right: 10,
height: 48,
width: 48,
bottom: 670,
child: IconButton(
icon: Icon(
Icons.keyboard_arrow_right,
size: 38,
),
onPressed: () => Navigator.pop(context)),
),
Positioned(
top: 5,
right: 20,
left: 20,
bottom: 15,
child: Container(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: ListView(
shrinkWrap: true,
reverse: true,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Name/Surname",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Position",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Company",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextFormField(
validator: validateEmail,
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "e-mail",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Phone Number",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
].reversed.toList(),
),
),
),
),
],
),
);
}
}
String validateEmail(String formEmail) {
String pattern = r'\w+#\w+\.\w+';
RegExp regex = RegExp(pattern);
if (!regex.hasMatch(formEmail)) return 'Invalid e-mail adress format';
return null;
}

Answer 1

try this way, and put in at the bottom of stack tree,
Positioned(
right: 10,
height: 48,
width: 48,
bottom: 670,
child: InkWell(
onTap: () => Navigator.pop(context),
child: Container(
/// container is just to check the press area
color: Colors.yellow,
child: Icon(
Icons.keyboard_arrow_right,
size: 38,
),
),
),
),