Flutter: background resizing & form input problem

Question

Currently I'm trying to create a user input form ontop of a container with rounded edges which takes up the whole screen. Behind that, there is a scaffold.

If I click on a textbox, the whole container is being resized. I tried to fix it with the "resizeToAvoidBottomPadding" option, but it won't be a good thing if the textbox is too far down and covered by the keyboard.

Here's how it looks like: resized container with automatic resizing

I found a "work-around" to solve the problem but I'm pretty sure it's not the way it should be solved. The way I tried to do it, is by putting a scaffold into a scaffold as follows:

Scaffold(
  resizeToAvoidBottomPadding: false,
  body: SafeArea(
    child: Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height,
          margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
          padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 20.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            color: Colors.green,
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: ListView(
            children: <Widget>[
              TextField(),
            ],
          ),
        ),
      ],
    ),
  ),
);

which in the end looks like that: my workaround

my two questions to you are:

• is there a "correct" way to do that?
• if not, is that a "reasonable" way to solve it?

Thanks for your help & best regards,

Lukas

Answer 1

This is what fixed it for me.

Have a Stack with its fit property set to StackFit.expand. Make sure this is the first child so that all the rest will be on top of the background.

Positioned.fill(
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage('assets/backdrop.png'),
        fit: BoxFit.fitWidth,
        alignment: Alignment.topCenter,
      ),
    ),
  ),
),

The magic code here is fit: BoxFit.fitWidth, so whenever the keyboard is showing or not, the image will respect its width and fill it accordingly.

I hope the helps someone else in the future!

Answer 2

I often have that problem when I have too many input fields. This is a known bug and is being worked on (so we hope) but the best workaround I found was having a container with bottom padding based on mediaQuery. The view still doesn't focus on the selected input but at least the user can scroll and see it.

MediaQueryData mediaQuery = MediaQuery.of(context);

Container(
  padding: EdgeInsets.only(
  bottom: mediaQuery.viewInsets.bottom,
  ),
),