简体   繁体   中英

Flutter SingleChildScrollView with Expanded

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.

在此处输入图片说明

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())
      ],
    ));

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM