Flutter - when keyboard opens it blocks my textfield

Question

When I select my text fields in my form the keyboard pops up, but it blocks me from typing or going to the next item.

I added an Inkwell just so I can get rid of it.

This page is loaded from my homepage where my Scaffold lies and has a bottom nav bar, when you click the nav bar it loads this page into the body.

I have tried to add a resizeToAvoidBottomPadding: false, to the scaffold and then wrap my code in a SingleChildScrollView and it did not work.

@override
  Widget build(BuildContext context) {
    return Center(
      key: scaffoldKey,
      child: InkWell(
          splashColor: Colors.transparent,
          onTap: (){
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: ListView(
            shrinkWrap: false,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: 150,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage("assets/images/prayer.png"),
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(15.0),
                child: Text(
                  "Share Your Prayer Request",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
              ),
              Container(
                padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                child: Text(
                  "We’d love to pray with you! Please complete the form below to submit your prayer request and our staff will pray for you this week.",
                  style: TextStyle(
                    fontSize: 14,
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Form(
                key: _formKey,
                child: Column(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                      child: Column(
                        children: <Widget>[
                          TextFormField(
                            onSaved: (val) {
                              if (val == '') {
                                newPrayer.name = "Name Not Entered";
                              } else {
                                newPrayer.name = val;
                              }
                            },
                            cursorColor: Colors.lightGreen,
                            keyboardType: TextInputType.text,
                            decoration: InputDecoration(
                                labelText: 'Name',
                                //labelStyle: TextStyle(color: myFocusNode.hasFocus ? Colors.black : Colors.grey),
                                hintText: 'Enter Your First and Last Name',
                                focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(color: Colors.lightGreen)),
                                border: OutlineInputBorder(borderSide: BorderSide())),
                          ),
                        ],
                      )

                    ),

...

I really would like to see the page scroll up when I select a text field so the person can see it and get to the submit button.

Answer 1

A scaffold isn't a page that holds other pages. Each page would need its own scaffold. So if this is it's own page then that's your issue. Wrap your Center widget into its own scaffold.