How to make keyboard open and textFormField hover over keyboard while opening Dart Flutter showModalBottomSheet?

Question

I have an application like this:

When I press the floatActionButton below, this is what happens:

When I come to this screen, I want the keyboard to open automatically.

---

When I press the textFormField myself, a screen like this happens:

The keyboard is getting ahead of the textFormField. How do I prevent this?

So, when showModalBottomSheet is opened, I want both the keyboard to open automatically and the keyboard not to get in front of the textFormField. How can I do that?

I want to do like this:

---

Codes:

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
  ),
  backgroundColor: Colors.white,
  context: context,
  builder: (context) {
    return Container(
      height: 125,
      child: Column(
        children: [
          Expanded(
            child: TextFormField(
              decoration: InputDecoration(
                labelText: 'Add new task',
                labelStyle: TextStyle(
                  color: Colors.black,
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.black,
                  ),
                ),
              ),
              style: TextStyle(
                color: Colors.black,
              ),
            
            ),
          )
        ],
      ),
    );
  },
);

Thanks in advance for the help.

Answer 1

Wrap your Container with another Container and give

padding: EdgeInsets.only(
  bottom: MediaQuery.of(context).viewInsets.bottom,
),

and also give isScrollControlled: true in showModalBottomSheet()

Like In your example,

showModalBottomSheet(
            isScrollControlled: true,
            backgroundColor: Colors.white,
            context: context,
            builder: (context) {
              return Container(
                padding: EdgeInsets.only(
                  bottom: MediaQuery
                      .of(context)
                      .viewInsets
                      .bottom,
                ),
                child: Container(
                  height: 125,
                  child: Column(
                    children: [
                      Expanded(
                        child: TextFormField(
                          decoration: InputDecoration(
                            labelText: 'Add new task',
                            labelStyle: TextStyle(
                              color: Colors.black,
                            ),
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.black,
                              ),
                            ),
                          ),
                          style: TextStyle(
                            color: Colors.black,
                          ),

                        ),
                      )
                    ],
                  ),
                ),
              );
            },
          );