Keyboard cancel SafeArea in Modal

Question

The safearea in modal is being ignored when keyboard is engaged. It this example you can see modal move by clicking on TextField. How can I have SafeArea in modal and avoid moving the modal when keyboard is activated?

Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Center(
          child: FlatButton(
            child: Text('open modal'),
            onPressed: () => showModalBottomSheet(
              isScrollControlled: true,
              context: context,
              builder: (context) => SafeArea( //< when safearea is removed the modal doesn't move
                child: Container(
                  height: 500,
                  child: TextField(
                    onChanged: (v) {},
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

wcyankees424 · Accepted Answer · 2020-04-09T01:01:13.947

I would use a Padding widget not SafeArea in a BotttomModalSheet especially because your not dealing with the top of the screen SafeArea is little more than just a padding widget in the first place check this out.

showModalBottomSheet(
              isScrollControlled: true,
              context: context,
              builder: (context) => Padding(
                padding: const EdgeInsets.all(16),
                //< when safearea is removed the modal doesn't move
                child: Container(
                  height: 500,
                  child: TextField(
                    onChanged: (v) {},
                  ),
                ),
              ),
            ),

If this is not what you are looking for let me know

Yeah.. I guess this will be the only option – delmin Apr 08 '20 at 23:05 — delmin, Apr 08 '20 at 23:05

Keyboard cancel SafeArea in Modal

1 Answers1