2

How do you guys solve the following Flutter layout??

I have a screen, where I have to show, as described in the picture: a logo + 3 TextFormFields + 2 buttons + a Container.

enter image description here

Problems:

  1. I need to put all the widgets inside a Column and, the Column inside a SingleChildScrollView so that, when the keyboard pops up, it does not cover the TextFields.
  2. The last widget, the Container, shall take all the remaining screen space on the bottom, but NOT taking more than the screen size. For that, My idea was to use the Expanded widget, so that the Container can expand to the bottom of the screen, but that gives an error:

The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming height constraints are unbounded.

So I guess my question, in short is, how do I prevent the keyboard to cover the TextFields, while at the same time I force the Container to take all the remaining space on the bottom.

That was my attempt:

SingleChildScrollView(
        child: Column(
      children: [
        Image.asset("assets/images/appLogo.png"),
        TextFormField(),
        TextFormField(),
        TextFormField(),
        Row(children: [TextButton(), TextButton()]),
        Expanded(child: Container())
      ],
    ));
codeKiller
  • 5,493
  • 17
  • 60
  • 115
  • Duplicate of https://stackoverflow.com/questions/56326005/how-to-use-expanded-in-singlechildscrollview and multiple ways to solve this problem – bilal Jun 18 '21 at 10:33

1 Answers1

3

Expanded doesn't know how much size to take. Also the other children don't know their exact size.

Wrap your Image inside a container and give height & width to it. also try wrapping all textfields inside a column or container each.

SingleChildScrollView(
    child: Column(
  children: [
    Container(
    width: MediaQuery.of(context).Size.width * 0.4,
    height: MediaQuery.of(context).Size.height * 0.2,
    child: Image.asset("assets/images/appLogo.png"),
    ),
    Column(
    children: [ 
    TextFormField(),
    TextFormField(),
    TextFormField(),]
    )
    Row(children: [TextButton(), TextButton()]),
    Expanded(child: Container())
  ],
));

I hope this will work for you.

Dhananjay Gavali
  • 251
  • 3
  • 13