颤动 - 如何让带孩子的容器占据整个屏幕

Question

根据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.我最接近它的工作：

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.

无法理解为什么MediaQuery或Device没有阻止溢出？ Android手机或平板电脑上的第一个Container总是溢出81像素;现在没有iPhone或iPad可供测试。基于我从其他帖子中读到的内容，只需通过包装在SingleChildScrollView中就可以纠正溢出黄色和黑色的帖子，但是当我尝试这样做时，我得到了

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

根据我所看到的错误，使用Expanded，ClipRect和其他小部件进行了其他几次尝试，但它只是在没有图像的情况下变得更糟。我错过了一些简单的东西，还是应该尝试另一种方式？

编辑：根据Amsakanna，最新的尝试在下面，但仍然溢出81像素，以在第一个代码块中产生相同的错误消息。

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.

尝试在SingleChildScrollView中使用IntrinsicHeight，在扩展内容中找到here以适合视口部分，但它也溢出（81像素）并出现类似的错误消息。

Answer 1

SizedBox.expand为我做了。下面是一个显示图像的示例，以便图像高度与父级匹配，容器在未使用的空间中绘制黑色背景：

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

Answer 2

你通过将它包装在SingleChildScrollView中来做到这一点。

每当你有像'Expanded'这样的flex小部件被放置在Column中时，就会发生第二个错误。如果您没有在第一列中放置任何展开的小部件，那么可能是Camera小部件正在执行此操作。

尝试通过将其包装在Container或SizedBox中来确定相应窗口小部件的确定大小。