[Flutter] How to fix Flutter "A RenderFlex overflowed by.." issue when keyboard opens

I get a A RenderFlex overflowed by 161 pixels on the bottom. issue in my Flutter app when the keyboard opens and I don't know why. I'm using a SingleChildScrollView with a fixed height to the container. Also I tried it with resizeToAvoidBottomInset: false, on Scaffold. No success.

I think that the problem has something to do with the included Pin Code Field on this page. But there I have no columns or something else... also I open this widget a ModalBottomSheet (https://pub.dev/packages/modal_bottom_sheet)

Here is my code structure:

Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
height: Get.height,
color: Get.theme.colorScheme.primary.withOpacity(.03),
padding: EdgeInsets.all(50),
child: ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: [
EntryGuestbookHeading(),
SizedBox(height: 50),
Obx(() {
if (entryGuestbookController.isCheckingCode.value == true) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
LoadingSpinner(),
SizedBox(height: 15),
Text("search_for_guestbook",
style: TextStyle(fontWeight: FontWeight.bold))
.tr(),
SizedBox(height: 50),
],
),
);
} else {
return Container();
}
}),
PinCodeField(
guestbookCodeController: guestbookCodeController,
),
EntryGuestbookActions(),
],
),
),
));
}


EntryGuestbookHeading Widget

Widget build(BuildContext context) {
return Container(
padding: context.isTablet
? EdgeInsets.only(left: 150, right: 150, top: 100)
: null,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Lottie.asset("assets/animations/key.json",
height: Get.height / 8, repeat: false),
SizedBox(height: 15),
Container(
child: Text(
"open_guestbook",
style: Get.theme.textTheme.headline3,
textAlign: TextAlign.left,
).tr(),
),
SizedBox(height: 15),
Text(
tr("enter_entry_code"),
style: Get.theme.textTheme.bodyText1,
)
],
),
);
}


PinCodeField Widget

Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 25),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: context.isTablet
? EdgeInsets.only(left: 150, right: 150, bottom: 150)
: null,
child: PinCodeTextField(
backgroundColor: Colors.transparent,
appContext: context,
length: 5,
focusNode: focusNode,
autoDisposeControllers: false,
obsecureText: false,
textCapitalization: TextCapitalization.characters,
animationType: AnimationType.slide,
autoFocus: true,
enableActiveFill: true,
pinTheme: PinTheme(
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(5),
fieldHeight: 50,
fieldWidth: 40,
inactiveColor: Colors.grey,
inactiveFillColor: Colors.transparent,
selectedColor: Get.theme.colorScheme.primary,
selectedFillColor: Get.theme.colorScheme.primary,
activeColor: Get.theme.colorScheme.primary,
activeFillColor: Get.theme.colorScheme.primary,
),
animationDuration: Duration(milliseconds: 300),
controller: widget.guestbookCodeController,
onCompleted: (v) {
entryGuestbookController.checkEntryCode(v).then((success) {
if (success == false) {
setState(() {
guestbookCodeController.text = "";
});
focusNode.requestFocus();
}
});
},
onChanged: (value) => null,
),
),
),
);
}


EntryGuestbookActions Widget

Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 15),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width - 50),
child: FlatButton(
child: Text("cancel",
style: TextStyle(
color: Get.theme.colorScheme.onBackground))
.tr(),
onPressed: () {
Navigator.of(context).pop();
})));
}


The autofocus is set to true. If the keyboard opens, I get the overflow error. Where is the issue in my code? Thanks in advance for your help!

Continue reading...