Keyboard overlay textfield, not working focusNode in Flutter - flutter

Question

I have a text field on the page which is located at the very bottom. resizeToAvoidBottomInset value: false. I added a focuseNode so that when the field is clicked, it will be in focus. But when I click on this text field, the keyboard overlaps and nothing is visible because the text field is at the very bottom and the page does not scroll when the keyboard opens. How can I make the text field visible when opening the keyboard? If I use resizeToAvoidBottomInset: true, then the page scrolls, but between the keyboard and the widget there is a large padding that is set at the bottom of the page and I cannot remove this padding.
main page
const Scaffold(
resizeToAvoidBottomInset: false,
body: FormPage(),
),
body
class FormPage extends StatefulWidget {
final int? paid;
final bool? init;
final Function(bool) parking;
final Function(int) valueChange;
const PaidParking({
Key? key,
required this.parking,
required this.paid,
required this.init,
required this.valueChange,
}) : super(key: key);
#override
State<FormPage > createState() => _FormPageState();
}
class _FormPageState extends State<FormPage > {
FocusNode myFocusNodeName = FocusNode();
final TextEditingController controller =
TextEditingController(text: '€59 per h');
#override
void initState() {
setState(() {
paidParking = widget.parkingInit ?? false;
controller.text =
'€${widget.paidInit != null ? (widget.paidInit! / 100) : 2} per h';
});
super.initState();
}
#override
void dispose() {
super.dispose();
myFocusNodeName.dispose();
}
#override
Widget build(BuildContext context) {
myFocusNodeName.addListener(() {
setState(() {});
});
return Padding(
padding: const EdgeInsets.only(top: 15),
child: Column(
children: [
Row(
children: [
Opacity(
opacity: paidParking ? 1 : 0.7,
child: const Text(
'Form Page',
style: TextStyle(
fontSize: 14,
fontFamily: constants.FontFamily.AvenirLtStd,
fontWeight: FontWeight.w700,
),
),
),
const SizedBox(width: 8),
switcher,
],
),
const SizedBox(height: 15),
paidParking ? parkingValueGet() : const SizedBox(),
],
),
);
}
void changeValue(bool operation, {bool editing = false}) {
final String value = controller.text;
double num = double.parse(
value
.replaceAll('€', '')
.replaceAll('per', '')
.replaceAll('h', '')
.replaceAll(' ', ''),
);
if (!editing) {
if (num <= 0 && !operation) return;
operation ? num += 0.05 : num -= 0.05;
controller.text = '€${num.toStringAsFixed(2)} per h';
widget.paidValueChange((num * 100).round());
} else {
num = double.parse(controller.text);
controller.text = '€${num.toStringAsFixed(2)} per h';
num = double.parse(
value
.replaceAll('€', '')
.replaceAll('per', '')
.replaceAll('h', '')
.replaceAll(' ', ''),
);
widget.valueChange((num * 100).round());
}
}
Widget parkingValueGet() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
InkWell(
onTap: () => changeValue(false),
child: _circleBox(false),
),
Column(
children: [
SizedBox(
height: 40,
width: 120,
child: TextField(
controller: controller,
focusNode: myFocusNodeName,
style: const TextStyle(
fontSize: 16,
fontFamily: FontFamily.AvenirBook,
color: constants.Colors.white,
decoration: TextDecoration.none,
),
onSubmitted: (value) => changeValue(true, editing: true),
onEditingComplete: () => changeValue(true, editing: true),
keyboardType: const TextInputType.numberWithOptions(
decimal: true,
signed: true,
),
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r"[0-9.]")),
],
textAlign: TextAlign.center,
decoration: const InputDecoration(
border: InputBorder.none,
),
),
),
Container(color: Colors.white, height: 1, width: 115),
],
),
InkWell(
onTap: () => changeValue(true),
child: _circleBox(true),
),
],
);
}
Widget _circleBox(bool operation) {
return Container(
height: 23,
width: 23,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: constants.Colors.white,
),
),
child: Text(
operation ? '+' : '-',
style: constants.Styles.smallBoldTextStyleWhite,
),
);
}
Widget get switcher => Opacity(
opacity: paidParking ? 1 : 0.7,
child: GestureDetector(
onTap: () {
setState(() {
paidParking = !paidParking;
});
widget.paidParking(paidParking);
},
child: Container(
height: 20,
alignment:
paidParking ? Alignment.centerRight : Alignment.centerLeft,
width: 40,
decoration: BoxDecoration(
color: paidParking ? constants.Colors.purpleMain : Colors.white,
borderRadius: BorderRadius.circular(14.5),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Container(
height: 17,
width: 17,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: paidParking ? Colors.white : const Color(0xff484452),
),
),
),
),
),
);
}

Answer 1

First I can recommend you to do some changes.
Remove setState() method calling inside initState()(have no
effect).
Remove totally the part of the below code. When you are using TexField
inside a StatefulWidget, every time the keyboard opened it will
recall your build() method and in this case, will add multiple focus
listeners on each build() method call, also each focus listener is
calling the setState() method which is triggering build() method
again. This is kind of an infinity loop. I wonder when you open the
keyboard, does your app stuck or stop working smoothly?
myFocusNodeName.addListener(() {
setState(() {});
});