Bottom overflowed by 217 pixels - flutter

Question

I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
I am trying to build a form which is the code attach below. But when I try to input the text in the textfieldform it pops out error of bottom overflowed by 217 pixels
Scaffold(
appBar: AppBar(
leading: SizedBox(
width: 16,
child: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Splash()),
);
}),
),
title: const Text(
"Upload KYC",
style: TextStyles.header4,
),
backgroundColor: ColorPalette.grey2,
elevation: 0,
),
backgroundColor: ColorPalette.grey2,
body: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 45.h(), left: 20.w(), right: 20.w(), bottom: 20.h()),
child: Row(
children: <Widget>[
Expanded(
child: Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Personal Details",
style: TextStyles.subtitle04,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.azure,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"ID Proof",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Center(
child: Text(
"Bank Details",
style: TextStyles.subtitle004,
),
),
Divider(
thickness: 4.h(),
color: ColorPalette.grey3,
)
],
),
),
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30.h(),
),
const Text(
"Enter Your Details",
style: TextStyles.header002,
),
SizedBox(height: 50.h()),
// KYC form
Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Align(
alignment: Alignment.topLeft,
child: Text(
'First Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your First Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please fill in your name';
}
firstName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Last Name',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Last Name',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
validator: (val) {
if (val!.isEmpty) {
return 'Please complete your name';
}
lastName = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: 'Enter Your Email Address',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
toolbarOptions:
const ToolbarOptions(copy: true, paste: true),
onChanged: (_) {
emailExists = false;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter an email address';
}
if (!Constants().emailFilter.hasMatch(val)) {
return 'Please enter a valid email';
}
if (emailExists) {
return 'A user with this email already exists';
}
email = val;
},
),
SizedBox(
height: 50.h(),
),
const Align(
alignment: Alignment.topLeft,
child: Text(
'Phone Email',
style: TextStyles.subtitle4,
),
),
SizedBox(
height: 20.h(),
),
TextFormField(
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: 'Enter Your Phone Number',
hintStyle: TextStyles.subtitle1,
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(16))),
contentPadding:
EdgeInsets.fromLTRB(24, 24, 12, 16),
),
validator: (val) {
if (val!.length < 11 || val.length > 11) {
return 'Phone Number should be 11';
}
phoneNumber = val;
},
),
],
)),
const Spacer(),
Padding(
padding: const EdgeInsets.only(bottom: 50),
child: ConstrainedBox(
constraints: const BoxConstraints.expand(height: 54),
child: Align(
alignment: Alignment.bottomCenter,
child: RoundedLoadingButton(
color: ColorPalette.blue1,
width: (MediaQuery.of(context).size.width - 40),
controller: _btnController,
borderRadius: 12,
elevation: 0,
animateOnTap: false,
onPressed: () => Navigator.of(context)
.pushReplacementNamed(KYCIDProofScreen.routeName),
child: const Text('Next'),
),
),
),
),
],
),
),
),
],
),
);

Answer 1

Column wrap with SingleChildScrollView it will solve the overflow issue