Flutter scroll List view if Keyboard is covering Textfield

This is how my page looks like at the moment:

The problem is that if I click one of the lower TextFields I get an error because the Keyboard is covering it...

My goal is that the headerLabel ("Neuer Kontakt") and the bottomButton ("Speichern") should be fixed. The TextFields in the middle should be in a scrollable list. If the user taps on a textField, the list scrolls so the textField is right above the keyboard (only for the ones where the keyboard would cover the textField). How can I achieve that? Or what is a Flutter way to handle this kind of design? I couldn't find anything on this.

This is what I tried but it does nothing when the keyboard appears:

return Scaffold(
  body: GestureDetector(
    onTap: () {
      FocusScope.of(context).unfocus();
    },
    child: SafeArea(
      child: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: scaleWidth(17),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: scaleWidth(15),
            ),
            PageHeaderBackButton(
              context: context,
            ),
            Text(
              locales.translate('createEmergencyContactHeadline'),
              style: AppTextStyles.h1,
            ),
            SizedBox(
              height: scaleWidth(30),
            ),
            SingleChildScrollView(
              child: Column(
                children: [
                  TextFieldWithHeader(
                      headerLabel: 'Name des Kontakts',
                      placeHolderText: 'z.B. Elfriede, Ehefrau'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer1',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                  SizedBox(
                    height: scaleWidth(30),
                  ),
                  TextFieldWithHeader(
                      headerLabel: 'Telefonnummer2',
                      placeHolderText: 'Telefonnummer hinzufügen'),
                ],
              ),
            ),
            Spacer(),
            BottomActionButton(
              nextButtonTappedCallback: () => {
                Navigator.pop(context),
              },
              title: 'Speichern',
              shouldShowArrowIcon: false,
            ),
            SizedBox(
              height: scaleWidth(17),
            ),
          ],
        ),
      ),
    ),
  ),
);