Here I want to have a layout with a full-screen-height container and on top of it is some text, and a container that has all the remain height of the screen.

My widget tree looks like this :

Container(
  height: MediaQuery.of(context).size.height,
  child: ListView(
    children: [
      Container(
        child: Text(),
      ),
      Container(
        ...
      ), // Need to fill the rest space
    ],
  ),
);

So how can I do that, I had tried to use column and expanded but the screen ends up showing nothing.

The layout I want to have

My layout

CodePudding user response：

You can do that with a Column and Expanded, see below. The problem with ListView is that it has no size limit, so you can't tell the other widget to occupy all remaining space because there is no such as total space. But you can add a ListView inside the Expanded widget if you need.

return Container(
  height: MediaQuery.of(context).size.height,
  child: Column(
    children: [
      Container(
        child: Text('aaaa'),
      ),
      Expanded(
          child: Container(
              child: Text('bbbb'),
              color: Colors.red)), // Need to fill the rest space
    ],
  ),
);