Flutter - How to get Container with children to take up entire screen

Question

As per Flutter docs Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The closest I've been to getting it to work:

return Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      //width: Device.screenWidth,
      //height: Device.screenHeight,
      child: Column(
        children: <Widget>[(view[1])],
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width * .50,
      height: MediaQuery.of(context).size.width * .50,
      child: Column(
        children: <Widget>[(view[0])],
      ),
    ),
  ],
);


I/flutter (12292): The following message was thrown during layout:
I/flutter (12292): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter (12292): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (12292): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (12292): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Can't understand why MediaQuery or Device isn't preventing overflow? The first Container always overflows by 81 pixels on both an Android phone or tablet; no iPhone or iPad to test now. Based on what I've read from other posts overflow with yellow & black is corrected simply by wrapping in a SingleChildScrollView but when I attempt to do so I get

child: SingleChildScrollView(
        child: Column(
          children: <Widget>[(view[1])],
        ),
      ),

I/flutter (12292): ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
I/flutter (12292): The following assertion was thrown during performLayout():
I/flutter (12292): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (12292): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (12292): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (12292): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (12292): space in the vertical direction.
I/flutter (12292): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
.
.
.
I/flutter (12292):   crossAxisAlignment: center
I/flutter (12292):   verticalDirection: down
I/flutter (12292): This RenderObject had the following child:
I/flutter (12292):   RenderAndroidView#e356e NEEDS-LAYOUT NEEDS-PAINT

Made several other attempts with Expanded, ClipRect & other widgets based on the errors I've seen but it just made it worse where there was no image at all. Am I missing something simple or should I attempt to fix this another way?

EDIT: As per Amsakanna the latest attempt is below but still overflows by 81 pixels to produce identical error message above in the first code block.

return Stack(
  children: <Widget>[
    SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[view[1])],
        ),
      ),
    ),

I/flutter ( 1144): The following message was thrown during layout:
I/flutter ( 1144): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter ( 1144): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 1144): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 1144): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Tried to use IntrinsicHeight inside SingleChildScrollView as found here in the Expanding content to fit the viewport section but it overflows too (by 81 pixels) with similar error message.

Answer 1

我的方法...

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Container(
        color: Colors.indigo[200],
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Image.file(_image),
            ),
          ],
        ),
      ),
    );

Answer 2

SizedBox.expand为我做到了。这是显示图像的示例，以使图像高度与父图像高度匹配，并且容器在未使用的空间中绘制黑色背景：

  SizedBox.expand(
    child: Container(
      color: Colors.black,
      child: Image (
        fit: BoxFit.fitHeight,
        image: AssetImage('assets/myimage.png'),
      ),
    ),
  );

Answer 3

您通过将其包装在 SingleChildScrollView 中来做到这一点。

每当您将像“Expanded”这样的 Flex 小部件放置在列内时，就会发生第二个错误。如果您没有在第一列中放置任何展开的小部件，则可能是相机小部件在执行此操作。

尝试通过将相机小部件包装在 Container 或 SizedBox 内来为其指定确定的大小。