图像背景底部溢出

Question

我不知道如何将背景调整为适合屏幕其余部分的大小。任何人都可以指出我怎么了？

我有点想使它适合其余屏幕，但无法做到...

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new GradientAppBar('Milkyway Galaxy'),
        new Container(
          child: new Stack(
            children: <Widget>[
              _buildBackground(),
              _buildDescription(),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildBackground() {
    return new Container(
//      constraints: new BoxConstraints.expand(),
      child: new Image.asset('assets/images/milkyway.gif', fit: BoxFit.cover,),
    );
  }

  Widget _buildDescription() {
    return new Container(
      child: new Center(
        child: new Text(milkyWayGalaxy.description),
      ),
    );
  }
}

Answer 1

使用BoxDecoration将您的图片用作Container的背景图片。使用Expanded小部件来确保Container填满屏幕的剩余空间：

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new GradientAppBar('Milkyway Galaxy'),
        new Expanded(
          child: new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage('assets/images/milkyway.gif'),
                fit: BoxFit.cover,
              ),
            ),
            child: new Center(
              child: new Text(milkyWayGalaxy.description),
            ),
          ),
        ),
      ],
    );
  }
}

如果文本较长，则可能需要将其包装在SingleChildScrollView中。