showModalBottomSheet triggers Futurebuilder - flutter

Question

I'm really frustrated on this one.
I have 3 functions that calls showModalBottomSheet in each function.
2 Modals that are Stateful and 1 Stateless.
I'm having problem with the other Stateful Modal.
They are both called using InkWell's onTap function. and both are also not occupying the whole screen therefore shows the main page.
MY STATEFUL MODAL THAT DOESN'T TRIGGER THE FUTURE/ DOESN'T REFRESH THE PAGE:
void showCommentsModal(int id) {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
backgroundColor: Color(colorBackground),
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Color(colorBackground),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20))),
height: MediaQuery.of(context).size.height / 1.5,
width: MediaQuery.of(context).size.width,
child: ViewCommentModal(
postID: id,
userList: userList,
),
);
},
);
}
THE OTHER STATEFUL MODAL THAT TRIGGERS THE FUTURE/ REFRESHES THE LIST:
addCommentModal(int i) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: AddCommentModal(
onPost: (String text) {
APIServices.commentPost(context, i.toString(), text);
Navigator.pop(context);
},
),
);
},
);
}
what makes the addCommentModal trigger the future? please help.
EDIT:
I've caught the suspect!
here is my AddCommentModal code:
class AddCommentModal extends StatefulWidget {
final ValueChanged<String> onPost;
AddCommentModal({#required this.onPost});
#override
_AddCommentModalState createState() => _AddCommentModalState();
}
class _AddCommentModalState extends State<AddCommentModal> {
final commentController = TextEditingController();
String defaultProfilePhoto = "";
#override
void initState() {
defaultProfilePhoto = Constants.userFirstName[0].toUpperCase();
super.initState();
}
#override
void dispose() {
commentController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Container(
width: 50,
height: 50,
child: ClipRRect(
borderRadius: new BorderRadius.circular(50),
child: Constants.userProfilePhoto == null
? Container(
color: Color(colorPrimary),
alignment: Alignment.center,
child: Text(
defaultProfilePhoto,
style: TextStyle(
color: Color(colorText), fontSize: 20),
),
)
: Image.network(
APIServices.httpDomain + Constants.userProfilePhoto,
fit: BoxFit.cover,
)),
),
Expanded(
child: Container(
margin: EdgeInsets.only(
left: 10,
),
child: TextFormField(
controller: commentController,
decoration: new InputDecoration(
suffixIcon: IconButton(
onPressed: () => widget.onPost(commentController.text),
icon: Icon(
FontAwesomeIcons.paperPlane,
size: 15,
color: Theme.of(context).primaryColor,
)),
contentPadding: EdgeInsets.all(10),
hintText: "Add a comment ...",
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide:
BorderSide(width: 1, color: Color(0xFFff8b50)))),
keyboardType: TextInputType.text,
style: new TextStyle(fontFamily: "Poppins", fontSize: 15),
),
))
],
));
}
}
The issue that causes the page to refresh is because of the SoftKeyboard that pops up whenever the TextFormField is focused.
When I show the the modal, it runs smoothly. but when I start to tap the field, the page refreshes as if the future is once again called.