How to put padding top in singlechildscrollview on keyboard appears - ios

Question

I using this library keyboard_actions to display Done button on above keyboard when on click on textfield. Now the issue is keyboard displays but done portion is overlapping/ Above on textfield although textfield is inside SingleChildScrollView. I want to put padding when keyboard appear so that i can see textfield. I have an attached screenshot so that you can understand.
TestPage.dart
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
#override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
final TextEditingController mobileNumber = TextEditingController();
final _formKey = GlobalKey<FormState>();
final FocusNode _nodeText1 = FocusNode();
late bool _passwordVisible;
final TextEditingController firstName = TextEditingController();
final TextEditingController lastName = TextEditingController();
final TextEditingController password = TextEditingController();
final TextEditingController confirmPassword = TextEditingController();
String pWord = "";
List gender = ["Male", "Female"];
late String genderChoose;
KeyboardActionsConfig _buildConfig(BuildContext context) {
return KeyboardActionsConfig(
keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
keyboardBarColor: Colors.grey[200],
nextFocus: false,
actions: [
KeyboardActionsItem(
focusNode: _nodeText1,
),
],
);
}
_TestPageState();
#override
void initState() {
genderChoose = gender[0];
_passwordVisible = false;
super.initState();
}
#override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
var box = GetStorage();
var lang = translator.activeLanguageCode;
return MediaQuery(
data: MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
.copyWith(boldText: false, textScaleFactor: 1.0),
child: Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
backgroundColor: Colors.red,
elevation: 0,
),
body: KeyboardActions(
config: _buildConfig(context),
child: Stack(
children: [
Padding(
padding:
const EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0),
child: Center(
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 90.0, right: 90.0, top: 25.0),
child: Image.asset(
'images/aa.png',
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 20.0),
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: Text(
'SIGN UP',
style: TextStyle(
color: Colors.red, fontSize: 24.0),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 15.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('First name'),
Row(
children: const [],
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border:
Border.all(color: Colors.grey)),
child: Padding(
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0,
top: 12.0,
bottom: 12.0),
child: TextFormField(
keyboardType: TextInputType.text,
controller: firstName,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 15.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('Last name'),
Row(
children: const [],
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border:
Border.all(color: Colors.grey)),
child: Padding(
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0,
top: 12.0,
bottom: 12.0),
child: TextFormField(
keyboardType: TextInputType.text,
controller: lastName),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 15.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('Mobile Number'),
Row(
children: const [],
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border:
Border.all(color: Colors.grey)),
child: Padding(
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0,
top: 12.0,
bottom: 12.0),
child: TextFormField(
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp("[0-9]")),
],
keyboardType: TextInputType.number,
focusNode: _nodeText1,
controller: mobileNumber,
decoration: InputDecoration.collapsed(
fillColor: Colors.white,
hintText: "5xxxxxxxx",
hintStyle: TextStyle(
color:
TuxedoColor.bodyColor)),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 20.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('Gender'),
Row(
children: const [],
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border:
Border.all(color: Colors.grey)),
child: Padding(
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0,
),
child: DropdownButton(
hint: const Text('Select Gender'),
value: genderChoose,
isExpanded: true,
underline: const SizedBox(),
icon:
const Icon(Icons.arrow_drop_down),
onChanged: (newValue) {
setState(() {
genderChoose = newValue as String;
});
},
items: gender.map((valueItem) {
return DropdownMenuItem(
value: valueItem,
child: Text(valueItem));
}).toList(),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 20.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('Password'),
Row(
children: const [],
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border:
Border.all(color: Colors.grey)),
child: Padding(
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0,
top: 12.0,
bottom: 12.0),
child: Stack(
children: [
TextFormField(
keyboardType:
TextInputType.visiblePassword,
controller: password,
obscureText: !_passwordVisible,
decoration:
InputDecoration.collapsed(
fillColor: Colors.white,
hintText: "*******",
hintStyle: TextStyle(
color: TuxedoColor
.bodyColor)),
),
Positioned(
right: 0,
top: -10,
bottom: 0,
child: IconButton(
icon: Icon(
_passwordVisible
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
setState(() {
_passwordVisible =
!_passwordVisible;
});
},
),
)
],
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 20.0, top: 20.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text('Confirm Password'),
Row(
children: const [],
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 10.0),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border:
Border.all(color: Colors.grey)),
child: Padding(
padding: const EdgeInsets.only(
left: 5.0,
right: 5.0,
top: 12.0,
bottom: 12.0),
child: Stack(
children: [
TextFormField(
keyboardType:
TextInputType.visiblePassword,
validator: (value) {
if (value!.trim().isEmpty) {
return "This Field is required";
}
if (value != pWord) {
return "Confirmation password does not match with the entered password";
}
return null;
},
controller: confirmPassword,
obscureText: !_passwordVisible,
decoration:
InputDecoration.collapsed(
fillColor: Colors.white,
hintText:
"Confirm Password",
hintStyle: TextStyle(
color: Colors.grey)),
),
Positioned(
right: 0,
top: -10,
bottom: 0,
child: IconButton(
icon: Icon(
_passwordVisible
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
setState(() {
_passwordVisible =
!_passwordVisible;
});
},
),
)
],
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0,
right: 20.0,
top: 20.0,
bottom: 30.0),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(
height: height * 0.060, width: width),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(
Colors.red),
),
onPressed: () {},
child: Text(
'SIGN UP ',
style: TextStyle(
fontSize: 16.0,
color: Colors.white),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(bottom: 30.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'Already have account? ',
style: TextStyle(),
),
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Text(
'Sign in',
style: TextStyle(
color: Colors.red,
decoration:
TextDecoration.underline,
),
),
)
],
),
)
],
),
),
),
],
),
),
),
),
),
],
),
),
),
);
}
}