键盘覆盖文本字段，Flutter 中的 focusNode 不起作用

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.

1. Remove setState() method calling inside initState() (have no effect).

2. 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(() {}); });